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 14, 2024 at 09:26 PM
-- 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,
  `delivery_fee` decimal(10,2) NOT NULL DEFAULT 0.00,
  `free_shipping` tinyint(1) NOT NULL DEFAULT 0,
  `is_paid` tinyint(1) NOT NULL DEFAULT 0
) 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 */;) i want to update this codes view orders (mark paid and make it clear) and i want to chagne design totaly to new one and change the table to somethign better and readable plz (<?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);

// Start output buffering to prevent "headers already sent" errors
ob_start();

// Include authentication and database connection **before** any output
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/db_connect.php';

// Helper Functions

/**
 * Sanitize input to prevent XSS and other injections.
 *
 * @param string $input The input string to sanitize.
 * @return string The sanitized string.
 */
function sanitize_input($input) {
    return htmlspecialchars(trim($input), ENT_QUOTES, 'UTF-8');
}

/**
 * Build a query string while preserving existing parameters.
 *
 * @param array $new_params Associative array of new parameters to add or update.
 * @return string The resulting query string.
 */
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 : '';
}

/**
 * Get the appropriate sort icon based on current sorting.
 *
 * @param string $column The column to check.
 * @param string $current_sort_by The current column being sorted by.
 * @param string $current_sort_order The current sort order ('ASC' or 'DESC').
 * @return string The HTML for the sort icon.
 */
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" aria-label="Ascending"></i>';
        } else {
            return '<i class="bi bi-arrow-down sort-icon" aria-label="Descending"></i>';
        }
    }
    return '';
}

/**
 * Generate a WhatsApp link from a contact number.
 *
 * @param string $contact The contact number.
 * @return string The WhatsApp URL.
 */
function generate_whatsapp_link($contact) {
    // Remove any non-digit characters except the plus sign
    $digits = preg_replace('/[^\d+]/', '', $contact);
    
    // Ensure the number starts with '+'
    if (strpos($digits, '+') !== 0) {
        $digits = '+' . $digits;
    }
    
    return "https://wa.me/" . ltrim($digits, '+');
}

/**
 * Calculate totals for a given set of order items.
 *
 * @param array $order_items The array of order items.
 * @param float $delivery_fee The delivery fee for the order.
 * @param int $free_shipping Indicates if free shipping is applied (1 for yes, 0 for no).
 * @return array An associative array containing total_before_discounts, total_discounts, delivery_fee, and final_total.
 */
function calculate_order_totals($order_items, $delivery_fee, $free_shipping) {
    $total_before_discounts = 0;
    $total_discounts = 0;
    $final_total = 0;

    foreach ($order_items as &$item) {
        $item_total = $item['quantity'] * $item['product_price'];
        $discount_amount = ($item['discount_percentage'] / 100) * $item_total;
        $item['discount_amount'] = $discount_amount;
        $item['total_after_discount'] = $item_total - $discount_amount;

        $total_before_discounts += $item_total;
        $total_discounts += $discount_amount;
    }
    unset($item); // Break reference
    $final_total = $total_before_discounts - $total_discounts;

    // Add delivery fee if not free shipping
    if (!$free_shipping) {
        $final_total += $delivery_fee;
    }

    return [
        'total_before_discounts' => $total_before_discounts,
        'total_discounts' => $total_discounts,
        'delivery_fee' => $free_shipping ? 0.00 : $delivery_fee,
        'final_total' => $final_total
    ];
}

// Handle Actions Before Including Header

if (isset($_GET['action'])) {
    if ($_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
        $valid_statuses = ['Pending', 'In Progress', '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'])) {
                            $check_stmt->close();
                            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();
        }
    } elseif ($_GET['action'] === 'export') {
        // Implement export functionality here
        // For brevity, this is left as a placeholder
        // You can generate CSV or PDF based on current filters
        // Redirect back with success message
        header("Location: view_orders.php?export=1");
        exit();
    }
}

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

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

// Handle Filters, Sorting, and Pagination
$filter = isset($_GET['filter']) ? sanitize_input($_GET['filter']) : 'all';
$status_filter = isset($_GET['status_filter']) ? sanitize_input($_GET['status_filter']) : 'all';
$priority_filter = isset($_GET['priority_filter']) ? sanitize_input($_GET['priority_filter']) : 'all';
$search = isset($_GET['search']) ? sanitize_input($_GET['search']) : '';
$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;
$orders_per_page = isset($_GET['orders_per_page']) ? intval($_GET['orders_per_page']) : ORDERS_PER_PAGE_DEFAULT;

// Handle Date Range Filters
$from_date = isset($_GET['from_date']) ? sanitize_input($_GET['from_date']) : '';
$to_date = isset($_GET['to_date']) ? sanitize_input($_GET['to_date']) : '';

// Validate orders_per_page
$allowed_orders_per_page = [10, 20, 50];
if (!in_array($orders_per_page, $allowed_orders_per_page)) {
    $orders_per_page = ORDERS_PER_PAGE_DEFAULT;
}

// Validate sort_by and sort_order
$allowed_sort_columns = ['id', 'customer_name', 'contact', 'status', 'priority', '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 = "";

// Status Filter
if ($status_filter !== 'all') {
    $where_conditions[] = "o.status = ?";
    $parameters[] = $status_filter;
    $param_types .= "s";
}

// Priority Filter
if ($priority_filter !== 'all') {
    $where_conditions[] = "o.priority = ?";
    $parameters[] = $priority_filter;
    $param_types .= "s";
}

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

// Date Range Filter on order_date
if (!empty($from_date)) {
    $where_conditions[] = "o.order_date >= ?";
    $parameters[] = $from_date . " 00:00:00";
    $param_types .= "s";
}

if (!empty($to_date)) {
    $where_conditions[] = "o.order_date <= ?";
    $parameters[] = $to_date . " 23:59:59";
    $param_types .= "s";
}

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

// Sorting
// To prevent SQL injection in ORDER BY, use a mapping
$sort_column_map = [
    'id' => 'o.id',
    'customer_name' => 'c.name',
    'contact' => 'c.contact',
    'status' => 'o.status',
    'priority' => 'o.priority',
    'order_date' => 'o.order_date',
    'delivery_datetime' => 'o.delivery_datetime'
];
$sort_column = isset($sort_column_map[$sort_by]) ? $sort_column_map[$sort_by] : 'o.order_date';
$order_clause = "ORDER BY $sort_column $sort_order";

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

// Fetch total number of orders for pagination
$count_sql = "
    SELECT COUNT(DISTINCT o.id) as total 
    FROM orders o
    JOIN customers c ON o.customer_id = c.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 details based on filters and sorting
$orders_sql = "
    SELECT 
        o.id AS order_id,
        o.status,
        o.priority,
        o.order_date,
        o.delivery_datetime,
        o.delivery_fee,
        o.free_shipping,
        c.name AS customer_name,
        c.contact,
        c.delivery_address
    FROM 
        orders o
    JOIN 
        customers c ON o.customer_id = c.id
    $where_clause
    $order_clause
    LIMIT ?, ?
";
$orders_stmt = $conn->prepare($orders_sql);
if ($orders_stmt) {
    // Bind parameters
    if (!empty($where_clause)) {
        // 'ii' for offset and limit
        $types = $param_types . "ii";
        $values = array_merge($parameters, [$offset, $orders_per_page]);
        $orders_stmt->bind_param($types, ...$values);
    } else {
        $orders_stmt->bind_param("ii", $offset, $orders_per_page);
    }
    $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_ids = [];
if ($orders_result && $orders_result->num_rows > 0) {
    while ($order = $orders_result->fetch_assoc()) {
        $order_ids[] = $order['order_id'];
    }
    // Reset result pointer
    $orders_result->data_seek(0);
}

$order_items = [];
if (!empty($order_ids)) {
    $placeholders = implode(',', array_fill(0, count($order_ids), '?'));
    $types = str_repeat('i', count($order_ids));
    $order_items_sql = "
        SELECT 
            oi.order_id,
            oi.product_id,
            oi.quantity,
            oi.packaging_preferences,
            oi.discount_percentage,
            oi.discount_reason,
            p.name AS product_name,
            p.size AS product_size,
            p.price AS product_price
        FROM 
            order_items oi
        JOIN 
            products p ON oi.product_id = p.id
        WHERE
            oi.order_id IN ($placeholders)
    ";
    $items_stmt = $conn->prepare($order_items_sql);
    if ($items_stmt) {
        $items_stmt->bind_param($types, ...$order_ids);
        $items_stmt->execute();
        $order_items_result = $items_stmt->get_result();
        while ($item = $order_items_result->fetch_assoc()) {
            $order_items[$item['order_id']][] = $item;
        }
        $items_stmt->close();
    }
}
?>
<!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=Poppins:wght@400;600;700&family=Roboto:wght@400;500;700&family=Inter: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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Custom Styles -->
    <style>
        /* ---------------------------------------------------
            1. CSS Variables for Consistent Design
        ---------------------------------------------------- */
        :root {
            /* Primary Colors */
            --background-color: #FFFFFF; /* Crisp White */
            --light-grey: #F5F5F5;
            --medium-grey: #CCCCCC;
            --dark-grey: #374151; /* Updated to requested color */

            /* Accent Colors */
            --accent-blue: #4A90E2;
            --accent-green: #50C878;
            --accent-red: #FF6B6B;
            --accent-teal: #20B2AA;
            --accent-soft-blue: #A3D2CA;
            --accent-purple: #8A65FF;
            --accent-orange: #FFA500;

            /* Text Colors */
            --primary-text: var(--dark-grey);
            --secondary-text: #666666;

            /* UI Elements */
            --input-border: var(--medium-grey);
            --input-focus-border: var(--accent-teal);
            --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            --box-border-radius: 12px;
            --hover-shadow: rgba(0, 0, 0, 0.1);

            /* Button Colors */
            --button-add-order: #6C63FF;
            --button-view-orders: #FFA500;
            --button-manage-products: #20B2AA;
            --button-manage-users: #4B0082;
            --button-generate-reports: #FF6B6B;

            /* Status Badge Colors */
            --badge-pending: #FFD166;
            --badge-in-progress: #6A4C93;
            --badge-completed: #4CAF50;
            --badge-delivered: #20B2AA;
        }
        /* 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 */
        }

        /* ---------------------------------------------------
            2. Global Styles
        ---------------------------------------------------- */
        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--light-grey);
            margin: 0;
            padding: 0;
            color: var(--primary-text);
        }

        .container-body {
            max-width: 1200px;
            margin: 40px auto;
            padding: 40px 20px;
            box-sizing: border-box;
            background-color: var(--background-color);
            box-shadow: var(--box-shadow);
            border-radius: var(--box-border-radius);
            font-family: 'Roboto', sans-serif;
            transition: all 0.3s ease;
        }

        /* ---------------------------------------------------
            3. Header Styles
        ---------------------------------------------------- */
        .header {
            padding: 20px 30px;
            background-color: var(--background-color);
            display: flex;
            align-items: center;
            justify-content: center; /* Center the content */
            margin-bottom: 30px;
            border-bottom: 1px solid var(--light-grey);
        }

        .header h1 {
            color: var(--dark-grey);
            font-size: 32px;
            font-weight: 700;
            font-family: 'Poppins', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header h1 i {
            margin-right: 10px;
            font-size: 28px;
            color: var(--accent-purple);
        }

        /* ---------------------------------------------------
            4. Welcome Section
        ---------------------------------------------------- */
        .welcome-section {
            background-color: var(--background-color);
            box-shadow: var(--box-shadow);
            border-radius: var(--box-border-radius);
            padding: 30px;
            text-align: center;
            margin-bottom: 30px;
            font-family: 'Poppins', sans-serif;
        }

        .welcome-section h3 {
            font-size: 28px;
            color: var(--primary-text);
            margin-bottom: 10px;
            font-weight: 700;
            display: none; /* Removed "Add New Order" from welcome section */
        }

        .welcome-section p {
            font-size: 16px;
            color: var(--secondary-text);
            margin: 0;
        }

        /* Decorative Line Under Welcome Section */
        .welcome-section::after {
            content: "";
            display: block;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
            margin: 15px auto 0;
            border-radius: 2px;
        }

        /* ---------------------------------------------------
            5. Success and Error Alerts
        ---------------------------------------------------- */
        .alert-success-custom {
            background-color: var(--badge-completed);
            color: #FFFFFF;
            border-radius: var(--box-border-radius);
            padding: 15px 20px;
            margin-bottom: 20px;
            text-align: center;
            width: 70%;
            margin: 20px auto;
            box-shadow: var(--box-shadow);
            animation: fadeIn 0.5s ease-in-out;
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .alert-error-custom {
            background-color: var(--badge-delivered);
            color: #FFFFFF;
            border-radius: var(--box-border-radius);
            padding: 15px 20px;
            margin-bottom: 20px;
            text-align: center;
            width: 70%;
            margin: 20px auto;
            box-shadow: var(--box-shadow);
            animation: fadeIn 0.5s ease-in-out;
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* ---------------------------------------------------
            6. Recent Orders Section
        ---------------------------------------------------- */
        .recent-orders-section {
            background-color: var(--background-color);
            border-radius: var(--box-border-radius);
            padding: 30px;
            box-shadow: var(--box-shadow);
        }

        .recent-orders-section h4 {
            font-size: 24px;
            font-weight: 700;
            color: var(--dark-grey);
            margin-bottom: 20px;
            font-family: 'Inter', sans-serif;
        }

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

        .filter-search-section > div {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* Filter Buttons */
        .filter-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-group label {
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--primary-text);
        }

        .filter-group select {
            padding: 10px 12px;
            border-radius: var(--box-border-radius);
            border: 1px solid var(--input-border);
            box-shadow: var(--box-shadow);
            transition: border-color 0.3s, box-shadow 0.3s;
            font-size: 14px;
            color: var(--primary-text);
            font-family: 'Inter', sans-serif;
            background-color: #FFFFFF;
            appearance: none;
            background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNjY2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTMuNTMgMTMuNTMgMWwxLjQ1LTEuNDUgMi01IDAtMkgxMi40NSAyLjU0bDItMi0xLjQ1LTEuNDUgMS40NS0xLjQ1djEwSDEuNDV2LTEwTDEuNDUgMC4yMjNMMTMuNTMgMTMuNTNaIi8+PC9zdmc+'); /* Down Arrow Icon */
        }

        .filter-group select:focus {
            border-color: var(--input-focus-border);
            box-shadow: 0px 2px 4px var(--box-shadow), 0px 0px 8px var(--input-focus-border);
            outline: none;
        }

        /* Search Group */
        .search-group {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .search-group input[type="text"] {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid var(--input-border);
            border-radius: var(--box-border-radius);
            font-size: 14px;
            color: var(--primary-text);
            font-family: 'Inter', sans-serif;
            background-color: #FFFFFF;
            background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMzc0MTUxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTMuNTMgMTMuNTMgMWwxLjQ1LTEuNDUgMi01IDAtMkgxMi40NSAyLjU0bDItMi0xLjQ1LTEuNDUgMS40NS0xLjQ1djEwSDEuNDVMMTMuNTMgMTMuNTNaIi8+PC9zdmc+'); /* Magnifying Glass Icon */
            background-repeat: no-repeat;
            background-position: left 10px center;
            background-size: 16px 16px;
            padding-left: 35px; /* To make space for the icon */
        }

        .search-group input[type="text"]:focus {
            border-color: var(--input-focus-border);
            box-shadow: 0px 2px 4px var(--box-shadow), 0px 0px 8px var(--input-focus-border);
            outline: none;
        }

        .search-group button {
            padding: 10px 20px;
            border: none;
            border-radius: var(--box-border-radius);
            background-color: #374151; /* Requested color */
            color: #FFFFFF;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: background-color 0.3s, box-shadow 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .search-group button:hover {
            background-color: #2e3c4e;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .search-group .btn-reset {
            background-color: #6c757d; /* Gray */
            color: #FFFFFF;
            display: flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

        .search-group .btn-reset:hover {
            background-color: #5a6268;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* Date Range Filter */
        .date-filter-group {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .date-filter-group label {
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--primary-text);
        }

        .date-filter-group input[type="text"] {
            padding: 10px 12px;
            border: 1px solid var(--input-border);
            border-radius: var(--box-border-radius);
            font-size: 14px;
            color: var(--primary-text);
            font-family: 'Inter', sans-serif;
            background-color: #FFFFFF;
            transition: border-color 0.3s, box-shadow 0.3s;
            width: 150px;
        }

        .date-filter-group input[type="text"]:focus {
            border-color: var(--input-focus-border);
            box-shadow: 0px 2px 4px var(--box-shadow), 0px 0px 8px var(--input-focus-border);
            outline: none;
        }

        .date-filter-group button.apply-button {
            padding: 10px 20px;
            border: none;
            border-radius: var(--box-border-radius);
            background-color: #374151; /* Requested color */
            color: #FFFFFF;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: background-color 0.3s, box-shadow 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .date-filter-group button.apply-button:hover {
            background-color: #2e3c4e;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* Entries Per Page Dropdown */
        .entries-per-page-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .entries-per-page-group label {
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--primary-text);
        }

        .entries-per-page-group select {
            padding: 10px 12px;
            border-radius: var(--box-border-radius);
            border: 1px solid var(--input-border);
            box-shadow: var(--box-shadow);
            transition: border-color 0.3s, box-shadow 0.3s;
            font-size: 14px;
            color: var(--primary-text);
            font-family: 'Inter', sans-serif;
            background-color: #FFFFFF;
            appearance: none;
            background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNjY2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTMuNTMgMTMuNTMgMWwxLjQ1LTEuNDUgMi01IDAtMkgxMi40NSAyLjU0bDItMi0xLjQ1LTEuNDUgMS40NS0xLjQ1djEwSDEuNDV2LTEwTDEuNDUgMC4yMjNMMTMuNTMgMTMuNTNaIi8+PC9zdmc+'); /* Down Arrow Icon */
        }

        .entries-per-page-group select:focus {
            border-color: var(--input-focus-border);
            box-shadow: 0px 2px 4px var(--box-shadow), 0px 0px 8px var(--input-focus-border);
            outline: none;
        }

        .pagination-info {
            font-size: 16px;
            font-family: 'Inter', sans-serif;
            color: var(--primary-text);
            margin-bottom: 20px;
        }

        /* ---------------------------------------------------
            7. Orders Table Styles
        ---------------------------------------------------- */
        .orders-table {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Roboto', sans-serif;
            border: 1px solid var(--medium-grey); /* Solid border for table */
        }

        .orders-table th, 
        .orders-table td {
            padding: 14px 16px;
            text-align: left;
            font-size: 14px;
            vertical-align: top;
            border: 1px solid var(--medium-grey); /* Solid border for table cells */
        }

        .orders-table th {
            background-color: var(--light-grey);
            color: var(--dark-grey);
            font-weight: 700;
            border-bottom: 2px solid var(--medium-grey);
            font-family: 'Inter', sans-serif;
            position: relative;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

        /* Underline for headers */
        .orders-table th::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--medium-grey);
        }

        .orders-table th:hover {
            background-color: var(--medium-grey);
            color: var(--accent-teal);
        }

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

        .orders-table tbody tr:nth-child(even) {
            background-color: #FAFAFA;
        }

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

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

        /* Center-align numeric columns */
        .orders-table td.number,
        .orders-table td.price,
        .orders-table td.quantity,
        .orders-table td.discount_percentage,
        .orders-table td.discount_amount,
        .orders-table td.total_after_discount {
            text-align: center;
            font-weight: bold;
        }

        /* Status Badges */
        .badge-status-pending {
            background-color: var(--badge-pending);
            color: #FFFFFF;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .badge-status-in-progress {
            background-color: var(--badge-in-progress);
            color: #FFFFFF;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .badge-status-completed {
            background-color: var(--badge-completed);
            color: #FFFFFF;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .badge-status-delivered {
            background-color: var(--badge-delivered);
            color: #FFFFFF;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        /* Highlight New Order IDs */
        .new-order {
            color: var(--accent-teal);
            font-weight: bold;
        }

        /* ---------------------------------------------------
            8. Action Buttons Styles
        ---------------------------------------------------- */
        .action-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .action-buttons .btn {
            padding: 10px 20px;
            font-size: 14px;
            border-radius: var(--box-border-radius);
            transition: transform 0.3s, background-color 0.3s;
            font-family: 'Inter', sans-serif;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            border: none;
            color: #FFFFFF;
        }

        .action-buttons .btn-edit {
            background-color: #6C63FF; /* Edit Order Color */
        }

        .action-buttons .btn-edit:hover {
            background-color: #5A54D1;
            transform: scale(1.05);
        }

        .action-buttons .btn-change-status {
            background-color: #FFA500; /* Change Status Color */
        }

        .action-buttons .btn-change-status:hover {
            background-color: #CC8400;
            transform: scale(1.05);
        }

        .action-buttons .btn-delete {
            background-color: #FF6B6B; /* Delete Order Color */
        }

        .action-buttons .btn-delete:hover {
            background-color: #E65A5A;
            transform: scale(1.05);
        }

        .action-buttons .btn-view {
            background-color: #20B2AA; /* View Order Color */
        }

        .action-buttons .btn-view:hover {
            background-color: #1AA091;
            transform: scale(1.05);
        }

        /* ---------------------------------------------------
            9. Pagination Styles
        ---------------------------------------------------- */
        .pagination .page-link {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            line-height: 38px;
            text-align: center;
            font-size: 14px;
            color: var(--accent-teal);
            border: 1px solid var(--accent-teal);
            transition: background-color 0.3s, color 0.3s;
        }

        .pagination .page-item.active .page-link {
            background-color: var(--accent-teal);
            color: #FFFFFF;
            border-color: var(--accent-teal);
        }

        .pagination .page-link:hover {
            background-color: var(--accent-soft-blue);
            color: #FFFFFF;
        }

        .pagination .page-item.disabled .page-link {
            color: #6c757d;
            background-color: transparent;
            border-color: #dee2e6;
            cursor: not-allowed;
        }

        /* ---------------------------------------------------
            10. Action Modal Styles
        ---------------------------------------------------- */
        /* Adjust modal size if needed */
        .modal-dialog {
            max-width: 500px;
        }

        .modal-content {
            border: 2px solid var(--accent-teal); /* Solid Border */
            border-radius: var(--box-border-radius);
            box-shadow: var(--box-shadow);
        }

        .modal-header {
            background-color: var(--accent-teal);
            border-bottom: none;
            border-top-left-radius: var(--box-border-radius);
            border-top-right-radius: var(--box-border-radius);
            color: #FFFFFF;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
        }

        .modal-body {
            font-size: 1rem;
            color: var(--dark-grey);
            font-family: 'Roboto', sans-serif;
        }

        .modal-footer {
            background-color: var(--light-grey);
            border-top: none;
            border-bottom-left-radius: var(--box-border-radius);
            border-bottom-right-radius: var(--box-border-radius);
        }

        .modal-footer .btn-secondary {
            background-color: #6B7280; /* Gray */
            border: none;
            color: #FFFFFF;
            font-family: 'Inter', sans-serif;
        }

        .modal-footer .btn-danger {
            background-color: #FF6B6B;
            border: none;
            color: #FFFFFF;
            font-family: 'Inter', sans-serif;
        }

        .modal-footer .btn-secondary:hover {
            background-color: #4B5563;
        }

        .modal-footer .btn-danger:hover {
            background-color: #E65A5A;
        }

        /* ---------------------------------------------------
            11. Change Status Controls Styles
        ---------------------------------------------------- */
        .change-status-controls {
            display: none;
            flex-direction: column;
            gap: 10px;
            margin-top: 10px;
        }

        .change-status-controls.active {
            display: flex;
        }

        .change-status-controls .form-select {
            width: 100%;
            padding: 10px 12px;
            border-radius: var(--box-border-radius);
            border: 1px solid var(--input-border);
            transition: border-color 0.3s, box-shadow 0.3s;
            font-size: 14px;
            color: var(--primary-text);
            font-family: 'Inter', sans-serif;
            background-color: #FFFFFF;
            appearance: none;
            background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNjY2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTMuNTMgMTMuNTMgMWwxLjQ1LTEuNDUgMi01IDAtMkgxMi40NSAyLjU0bDItMi0xLjQ1LTEuNDUgMS40NS0xLjQ1djEwSDEuNDV2LTEwTDEuNDUgMC4yMjNMMTMuNTMgMTMuNTNaIi8+PC9zdmc+'); /* Down Arrow Icon */
        }

        .change-status-controls .form-select:focus {
            border-color: var(--input-focus-border);
            box-shadow: 0px 2px 4px var(--box-shadow), 0px 0px 8px var(--input-focus-border);
            outline: none;
        }

        .change-status-controls .action-buttons-inline {
            display: flex;
            gap: 10px;
        }

        .change-status-controls .action-buttons-inline .btn-primary {
            background-color: #374151; /* Requested color */
            color: #FFFFFF;
        }

        .change-status-controls .action-buttons-inline .btn-primary:hover {
            background-color: #2e3c4e;
            transform: scale(1.05);
        }

        .change-status-controls .action-buttons-inline .btn-secondary {
            background-color: #6B7280; /* Gray */
            color: #FFFFFF;
        }

        .change-status-controls .action-buttons-inline .btn-secondary:hover {
            background-color: #4B5563;
            transform: scale(1.05);
        }

        /* ---------------------------------------------------
            12. Discount Styles
        ---------------------------------------------------- */
        .discount-info {
            margin-top: 6px;
            font-size: 14px;
            color: var(--accent-red);
            font-family: 'Roboto', sans-serif;
        }

        /* ---------------------------------------------------
            13. Responsive Design Enhancements
        ---------------------------------------------------- */
        @media (max-width: 992px) {
            .container-body {
                padding: 30px 15px;
            }
        }

        @media (max-width: 768px) {
            .filter-search-section {
                flex-direction: column;
                align-items: flex-start;
            }

            .filter-search-section > div {
                width: 100%;
                justify-content: space-between;
                margin-bottom: 10px;
            }

            .search-group {
                width: 100%;
            }

            .search-group input[type="text"] {
                width: 100%;
            }

            .search-group button,
            .search-group .btn-reset {
                width: 100%;
                margin-top: 10px;
            }

            .entries-per-page-group {
                flex-wrap: wrap;
            }

            .entries-per-page-group label,
            .entries-per-page-group select {
                width: 100%;
            }

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

            .action-buttons .btn {
                font-size: 12px;
                padding: 8px 12px;
            }

            .recent-orders-section h4 {
                font-size: 20px;
            }

            .pagination-info {
                font-size: 14px;
            }

            /* Adjust search-above-table on smaller screens */
            .search-above-table form {
                flex-direction: column;
                align-items: stretch;
            }

            .search-above-table .form-control {
                margin-bottom: 10px;
            }

            .search-above-table .btn {
                width: 100%;
            }

            .search-above-table .btn-reset {
                width: 100%;
                margin-top: 10px;
            }
        }

        @media (max-width: 576px) {
            .container-body {
                padding: 20px 10px;
            }

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

            .recent-orders-section h4 {
                font-size: 18px;
            }

            .pagination-info {
                font-size: 12px;
            }

            .action-buttons .btn {
                padding: 6px 10px;
                font-size: 10px;
            }

            /* Card-like layout for orders on small screens */
            .orders-table thead {
                display: none;
            }

            .orders-table, .orders-table tbody, .orders-table tr, .orders-table td {
                display: block;
                width: 100%;
            }

            .orders-table tr {
                margin-bottom: 15px;
                background-color: #f9f9f9;
                border-radius: var(--box-border-radius);
                padding: 10px;
            }

            .orders-table td {
                text-align: right;
                padding-left: 50%;
                position: relative;
            }

            .orders-table td::before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                font-weight: bold;
                text-align: left;
                color: var(--primary-text);
            }
        }

        /* ---------------------------------------------------
            14. Search Input Above Table Styles
        ---------------------------------------------------- */
        .search-above-table form {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .search-above-table .form-control {
            flex: 1;
            padding: 10px 35px 10px 35px; /* Adjusted for icon spacing */
            border: 1px solid var(--input-border);
            border-radius: var(--box-border-radius);
            font-size: 14px;
            color: var(--primary-text);
            font-family: 'Inter', sans-serif;
            background-color: #FFFFFF;
            background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMzc0MTUxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTMuNTMgMTMuNTMgMWwxLjQ1LTEuNDUgMi01IDAtMkgxMi40NSAyLjU0bDItMi0xLjQ1LTEuNDUgMS40NS0xLjQ1djEwSDEuNDUgMC4yMjNMMTMuNTMgMTMuNTNaIi8+PC9zdmc+'); /* Magnifying Glass Icon */
            background-repeat: no-repeat;
            background-position: left 10px center;
            background-size: 16px 16px;
        }

        .search-above-table .form-control:focus {
            border-color: var(--input-focus-border);
            box-shadow: 0px 2px 4px var(--box-shadow), 0px 0px 8px var(--input-focus-border);
            outline: none;
        }

        .search-above-table button {
            padding: 10px 20px;
            border: none;
            border-radius: var(--box-border-radius);
            background-color: #374151; /* Requested color */
            color: #FFFFFF;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: background-color 0.3s, box-shadow 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .search-above-table button:hover {
            background-color: #2e3c4e;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .search-above-table .btn-reset {
            background-color: #6c757d; /* Gray */
            color: #FFFFFF;
            display: flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

        .search-above-table .btn-reset:hover {
            background-color: #5a6268;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    </style>

    <!-- Additional JavaScript for Print Functionality -->
    <script>
        function printOrders() {
            window.print();
        }

        function exportOrders() {
            window.location.href = 'view_orders.php?action=export';
        }

        // Prevent modal from showing on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Removed modal initialization as it's no longer used
        });
    </script>
</head>
<body>
<main class='container-body'>
    <!-- Header Already Included via header.php -->

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

    <?php if (isset($_GET['error'])): ?>
        <?php if ($_GET['error'] == 1): ?>
            <div class="alert-error-custom" role="alert">
                <i class="bi bi-exclamation-triangle-fill"></i> Failed to update order status.
            </div>
        <?php elseif ($_GET['error'] == 2): ?>
            <div class="alert-error-custom" role="alert">
                <i class="bi bi-exclamation-triangle-fill"></i> Invalid status selected.
            </div>
        <?php elseif ($_GET['error'] == 3): ?>
            <div class="alert-error-custom" role="alert">
                <i class="bi bi-exclamation-triangle-fill"></i> Cannot set status to Delivered without a delivery date and time.
            </div>
        <?php elseif ($_GET['error'] == 4): ?>
            <div class="alert-error-custom" role="alert">
                <i class="bi bi-exclamation-triangle-fill"></i> Failed to delete the order. Please try again.
            </div>
        <?php elseif ($_GET['error'] == 5): ?>
            <div class="alert-error-custom" role="alert">
                <i class="bi bi-exclamation-triangle-fill"></i> Invalid order ID provided.
            </div>
        <?php endif; ?>
    <?php endif; ?>


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

        <!-- Filter and Search Section -->
        <div class="filter-search-section">
            <!-- Status Filter Dropdown -->
            <div class="filter-group">
                <label for="statusFilter"><i class="bi bi-filter-circle"></i> Status:</label>
                <select id="statusFilter" onchange="applyFilters()">
                    <option value="all" <?php echo $status_filter === 'all' ? 'selected' : ''; ?>>All</option>
                    <option value="Pending" <?php echo $status_filter === 'Pending' ? 'selected' : ''; ?>>Pending</option>
                    <option value="In Progress" <?php echo $status_filter === 'In Progress' ? 'selected' : ''; ?>>In Progress</option>
                    <option value="Completed" <?php echo $status_filter === 'Completed' ? 'selected' : ''; ?>>Completed</option>
                    <option value="Delivered" <?php echo $status_filter === 'Delivered' ? 'selected' : ''; ?>>Delivered</option>
                </select>
            </div>

            <!-- Priority Filter Dropdown -->
            <div class="filter-group">
                <label for="priorityFilter"><i class="bi bi-filter-circle"></i> Priority:</label>
                <select id="priorityFilter" onchange="applyFilters()">
                    <option value="all" <?php echo $priority_filter === 'all' ? 'selected' : ''; ?>>All</option>
                    <option value="Quick" <?php echo $priority_filter === 'Quick' ? 'selected' : ''; ?>>Quick</option>
                    <option value="Important" <?php echo $priority_filter === 'Important' ? 'selected' : ''; ?>>Important</option>
                    <option value="Normal" <?php echo $priority_filter === 'Normal' ? 'selected' : ''; ?>>Normal</option>
                </select>
            </div>

            <!-- Reset Filters Button -->
            <div class="filter-group">
                <?php
                    // Build the reset URL with default filter values while preserving sort parameters
                    $reset_params = [
                        'filter' => 'all',
                        'status_filter' => 'all',
                        'priority_filter' => 'all',
                        'search' => null,
                        'from_date' => null,
                        'to_date' => null,
                        'sort_by' => $sort_by,
                        'sort_order' => $sort_order,
                        'orders_per_page' => $orders_per_page,
                        'page' => 1
                    ];
                ?>
                <a href="view_orders.php<?php echo build_query($reset_params); ?>" class="btn btn-secondary"><i class="bi bi-arrow-counterclockwise"></i> Reset Filters</a>
            </div>
        </div>

        <!-- Search Input and Button Above the Table -->
        <div class="search-above-table mb-4">
            <form method="GET" action="view_orders.php" class="d-flex align-items-center flex-wrap">
                <input type="hidden" name="filter" value="<?php echo sanitize_input($filter); ?>">
                <input type="hidden" name="status_filter" value="<?php echo sanitize_input($status_filter); ?>">
                <input type="hidden" name="priority_filter" value="<?php echo sanitize_input($priority_filter); ?>">
                <input type="hidden" name="from_date" value="<?php echo sanitize_input($from_date); ?>">
                <input type="hidden" name="to_date" value="<?php echo sanitize_input($to_date); ?>">
                <input type="hidden" name="sort_by" value="<?php echo sanitize_input($sort_by); ?>">
                <input type="hidden" name="sort_order" value="<?php echo sanitize_input($sort_order); ?>">
                <input type="text" name="search" class="form-control mb-2 me-2" placeholder="🔍 Search by Customer, ID, or Contact" value="<?php echo sanitize_input($search); ?>">
                <button type="submit" class="btn btn-primary mb-2"><i class="bi bi-search"></i> Search</button>
                <?php if (!empty($search)): ?>
                    <a href="view_orders.php<?php echo build_query(['search' => null, 'page' => 1]); ?>" class="btn btn-reset ms-2 mb-2"><i class="bi bi-x-circle"></i> Reset</a>
                <?php endif; ?>
            </form>
        </div>

        <!-- Date Range Filter -->
        <div class="date-filter-group">
            <label for="fromDate"><i class="bi bi-calendar-check-fill"></i> From:</label>
            <input type="text" id="fromDate" name="from_date" class="form-control mb-2" placeholder="YYYY-MM-DD" value="<?php echo sanitize_input($from_date); ?>">
            
            <label for="toDate"><i class="bi bi-calendar-check-fill"></i> To:</label>
            <input type="text" id="toDate" name="to_date" class="form-control mb-2" placeholder="YYYY-MM-DD" value="<?php echo sanitize_input($to_date); ?>">
            
            <button type="button" class="btn apply-button mb-2" onclick="applyDateFilters()"><i class="bi bi-calendar-fill"></i> Apply</button>
        </div>

        <!-- Entries Per Page Dropdown -->
        <div class="entries-per-page-group mb-3">
            <label for="entriesPerPage"><i class="bi bi-layout-split"></i> Show:</label>
            <select id="entriesPerPage" onchange="applyFilters()">
                <option value="10" <?php echo $orders_per_page == 10 ? 'selected' : ''; ?>>10</option>
                <option value="20" <?php echo $orders_per_page == 20 ? 'selected' : ''; ?>>20</option>
                <option value="50" <?php echo $orders_per_page == 50 ? 'selected' : ''; ?>>50</option>
            </select>
            <span class="ms-2">entries</span>
        </div>

        <!-- Pagination Information -->
        <div class="pagination-info">
            <?php
                if ($total_orders == 0) {
                    $start_order = 0;
                    $end_order = 0;
                } else {
                    $start_order = ($page - 1) * $orders_per_page + 1;
                    $end_order = min($page * $orders_per_page, $total_orders);
                }
                echo "Showing <strong>$start_order</strong> to <strong>$end_order</strong> of <strong>$total_orders</strong> orders";
            ?>
        </div>

        <!-- Orders Table -->
        <div class="table-responsive">
            <table class="table table-hover orders-table">
                <thead>
                    <tr>
                        <th onclick="sortTable('id')">
                            ID
                            <?php echo get_sort_icon('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>
                            Products
                        </th>
                        <th>
                            Delivery Fee
                        </th>
                        <th onclick="sortTable('status')">
                            Status
                            <?php echo get_sort_icon('status', $sort_by, $sort_order); ?>
                        </th>
                        <th onclick="sortTable('priority')">
                            Priority
                            <?php echo get_sort_icon('priority', $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>
                            Order Total (KD)
                        </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'));
                                // Generate WhatsApp link
                                $whatsapp_link = generate_whatsapp_link($order['contact']);

                                // Determine badge class based on status
                                switch ($order['status']) {
                                    case 'Pending':
                                        $badge_class = 'badge-status-pending';
                                        $icon = 'hourglass-split';
                                        break;
                                    case 'In Progress':
                                        $badge_class = 'badge-status-in-progress';
                                        $icon = 'arrow-repeat';
                                        break;
                                    case 'Completed':
                                        $badge_class = 'badge-status-completed';
                                        $icon = 'check-circle-fill';
                                        break;
                                    case 'Delivered':
                                        $badge_class = 'badge-status-delivered';
                                        $icon = 'box-seam';
                                        break;
                                    default:
                                        $badge_class = 'badge bg-light text-dark';
                                        $icon = 'info-circle';
                                }

                                // Fetch order items
                                $items = isset($order_items[$order['order_id']]) ? $order_items[$order['order_id']] : [];

                                // Calculate order totals, including delivery fee if applicable
                                $totals = calculate_order_totals($items, $order['delivery_fee'], $order['free_shipping']);
                            ?>
                            <!-- Main Row -->
                            <tr>
                                <td class="<?php echo $is_new ? 'new-order' : ''; ?>" data-bs-toggle="collapse" data-bs-target="#orderDetails<?= htmlspecialchars($order['order_id']) ?>" aria-expanded="false" aria-controls="orderDetails<?= htmlspecialchars($order['order_id']) ?>" data-label="ID">
                                    <?= htmlspecialchars($order['order_id']) ?>
                                    <?php if ($is_new): ?>
                                        <span class="<?= $badge_class ?> ms-1"><i class="bi bi-star-fill"></i> New</span>
                                    <?php endif; ?>
                                </td>
                                <td data-label="Customer">
                                    <?= htmlspecialchars($order['customer_name']) ?>
                                </td>
                                <td data-label="Contact">
                                    <a href="<?= $whatsapp_link ?>" target="_blank" class="text-decoration-none">
                                        <i class="bi bi-whatsapp" style="color: #25D366;"></i> <?= htmlspecialchars($order['contact']) ?>
                                    </a>
                                </td>
                                <td data-label="Delivery Address"><?= nl2br(htmlspecialchars($order['delivery_address'])) ?></td>
                                <td data-label="Products">
                                    <?php if (!empty($items)): ?>
                                        <?php foreach ($items as $item): ?>
                                            <div class="mb-2">
                                                <strong><?= htmlspecialchars($item['product_name']) ?></strong><br>
                                                Size: <?= htmlspecialchars($item['product_size']) ?><br>
                                                Price: <?= number_format($item['product_price'], 2) ?> KD<br>
                                                Qty: <?= htmlspecialchars($item['quantity']) ?><br>
                                                <?php if (floatval($item['discount_percentage']) > 0): ?>
                                                    <div class="discount-info">
                                                        <i class="bi bi-tags-fill"></i> Discount: <?= htmlspecialchars($item['discount_percentage']) ?>%<br>
                                                        <small style='font-size:14px'>Reason: <?= htmlspecialchars($item['discount_reason']) ?></small>
                                                    </div>
                                                <?php endif; ?>
                                                <?php
                                                    $total = ($item['product_price'] * $item['quantity']);
                                                    if ($item['discount_percentage'] > 0) {
                                                        $total -= ($total * ($item['discount_percentage'] / 100));
                                                    }
                                                    $total = $total < 0 ? 0 : $total;
                                                ?>
                                                <strong>Total: <?= number_format($total, 2) ?> KD</strong>
                                            </div>
                                            <hr>
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <span class='text-muted'>No products found.</span>
                                    <?php endif; ?>
                                </td>
                                <td data-label="Delivery Fee">
                                    <?php if ($order['free_shipping'] == 1): ?>
                                        <span class="badge bg-success">Free</span>
                                    <?php else: ?>
                                        <?= number_format($order['delivery_fee'], 2) ?> KD
                                    <?php endif; ?>
                                </td>
                                <td data-label="Status">
                                    <span class="<?= $badge_class ?>"><i class="bi bi-<?= $icon ?>"></i> <?= htmlspecialchars($order['status']) ?></span>
                                </td>
                                <td data-label="Priority">
                                    <?= htmlspecialchars($order['priority']) ?>
                                </td>
                                <td data-label="Order Date"><?= date("d M Y, h:i A", strtotime($order['order_date'])) ?></td>
                                <td data-label="Delivery DateTime"><?= $order['delivery_datetime'] ? date("d M Y, h:i A", strtotime($order['delivery_datetime'])) : 'N/A' ?></td>
                                <td data-label="Order Total">
                                    <strong><?= number_format($totals['final_total'], 2) ?> KD</strong>
                                </td>
                            </tr>

                            <!-- Action Row -->
                            <tr class="collapse" id="orderDetails<?= htmlspecialchars($order['order_id']) ?>">
                                <td colspan="11">
                                    <div class="action-buttons">
                                        <!-- Edit Order -->
                                        <button class="btn btn-edit" onclick="editOrder(<?= htmlspecialchars($order['order_id']) ?>)" title="Edit Order" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Order">
                                            <i class="bi bi-pencil-fill"></i> Edit
                                        </button>
                                        
                                        <!-- Change Status -->
                                        <button class="btn btn-change-status" onclick="toggleChangeStatus(<?= htmlspecialchars($order['order_id']) ?>)" title="Change Status" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Change Status">
                                            <i class="bi bi-arrow-repeat"></i> Change Status
                                        </button>
                                        
                                        <!-- Delete Order -->
                                        <button class="btn btn-delete" onclick="confirmDelete(<?= htmlspecialchars($order['order_id']) ?>)" title="Delete Order" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Delete Order">
                                            <i class="bi bi-trash-fill"></i> Delete
                                        </button>
                                            
                                        <!-- View Customer Order -->
                                        <a href="view_order_customer.php?order_id=<?= htmlspecialchars($order['order_id']) ?>" class="btn btn-view" title="View Customer Order" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="View Customer Order">
                                            <i class="bi bi-eye-fill"></i> View
                                        </a>
                                    </div>
                                    
                                    <!-- Change Status Controls -->
                                    <div class="change-status-controls" id="changeStatusControls<?= htmlspecialchars($order['order_id']) ?>">
                                        <label for="newStatus<?= htmlspecialchars($order['order_id']) ?>" class="form-label"><i class="bi bi-arrow-repeat"></i> Change Order Status</label>
                                        <select class="form-select" id="newStatus<?= htmlspecialchars($order['order_id']) ?>" onchange="validateChangeStatus(<?= htmlspecialchars($order['order_id']) ?>)">
                                            <option value="" selected disabled>Choose status...</option>
                                            <option value="Pending">Pending</option>
                                            <option value="In Progress">In Progress</option>
                                            <option value="Completed">Completed</option>
                                            <option value="Delivered">Delivered</option>
                                        </select>
                                        <div class="action-buttons-inline">
                                            <button class="btn btn-primary" id="confirmChangeStatusBtn<?= htmlspecialchars($order['order_id']) ?>" onclick="confirmChangeStatus(<?= htmlspecialchars($order['order_id']) ?>)" disabled>Change Status</button>
                                            <button class="btn btn-secondary" onclick="cancelChangeStatus(<?= htmlspecialchars($order['order_id']) ?>)">Cancel</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        <?php endwhile; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="11" 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
                            $prev_page = max($page - 1, 1);
                            $reset_params_prev = [
                                'filter' => $filter,
                                'status_filter' => $status_filter,
                                'priority_filter' => $priority_filter,
                                'search' => $search,
                                'from_date' => $from_date,
                                'to_date' => $to_date,
                                'sort_by' => $sort_by,
                                'sort_order' => $sort_order,
                                'orders_per_page' => $orders_per_page,
                                'page' => $prev_page
                            ];
                            echo build_query($reset_params_prev);
                        ?>" tabindex="-1" aria-disabled="<?php echo ($page <= 1) ? 'true' : 'false'; ?>">Previous</a>
                    </li>

                    <!-- Page Numbers -->
                    <?php
                        // Determine the range of pages to show
                        $max_links = 5;
                        $start = max($page - floor($max_links / 2), 1);
                        $end = min($start + $max_links - 1, $total_pages);
                        if ($end - $start < $max_links - 1) {
                            $start = max($end - $max_links + 1, 1);
                        }
                    ?>
                    <?php for ($i = $start; $i <= $end; $i++): ?>
                        <li class="page-item <?php echo ($page == $i) ? 'active' : ''; ?>">
                            <a class="page-link" href="view_orders.php<?php
                                $reset_params_page = [
                                    'filter' => $filter,
                                    'status_filter' => $status_filter,
                                    'priority_filter' => $priority_filter,
                                    'search' => $search,
                                    'from_date' => $from_date,
                                    'to_date' => $to_date,
                                    'sort_by' => $sort_by,
                                    'sort_order' => $sort_order,
                                    'orders_per_page' => $orders_per_page,
                                    'page' => $i
                                ];
                                echo build_query($reset_params_page);
                            ?>"><?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
                            $next_page = min($page + 1, $total_pages);
                            $reset_params_next = [
                                'filter' => $filter,
                                'status_filter' => $status_filter,
                                'priority_filter' => $priority_filter,
                                'search' => $search,
                                'from_date' => $from_date,
                                'to_date' => $to_date,
                                'sort_by' => $sort_by,
                                'sort_order' => $sort_order,
                                'orders_per_page' => $orders_per_page,
                                'page' => $next_page
                            ];
                            echo build_query($reset_params_next);
                        ?>">Next</a>
                    </li>
                </ul>
            </nav>
        <?php endif; ?>

        <!-- Footer -->
        <div class="footer text-center mt-4">
            &copy; <?= date("Y") ?> Kaak Alia Bakery. All rights reserved.
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <!-- Removed as per the request -->

</main>
    <!-- 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, Deletion, and Filtering -->
    <script>
        // Initialize Flatpickr for date inputs if present
        flatpickr("#fromDate", {
            dateFormat: "Y-m-d",
            maxDate: "today",
            allowInput: true
        });

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

        // 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 using browser confirm dialog
        function confirmDelete(orderId) {
            if (window.confirm("Are you sure you want to delete this order? This action cannot be undone.")) {
                window.location.href = 'delete_order.php?order_id=' + orderId;
            }
        }

        // Function to toggle Change Status Controls
        function toggleChangeStatus(orderId) {
            const controls = document.getElementById('changeStatusControls' + orderId);
            const originalButtons = controls.previousElementSibling; // action-buttons div

            if (controls.classList.contains('active')) {
                controls.classList.remove('active');
                originalButtons.style.display = 'flex';
            } else {
                // Hide other change status controls
                document.querySelectorAll('.change-status-controls.active').forEach(function(el) {
                    el.classList.remove('active');
                    const siblings = el.previousElementSibling;
                    if (siblings) {
                        siblings.style.display = 'flex';
                    }
                });
                controls.classList.add('active');
                originalButtons.style.display = 'none';
            }
        }

        // Function to confirm status change
        function confirmChangeStatus(orderId) {
            const newStatus = document.getElementById('newStatus' + orderId).value;
            if (newStatus) {
                if (confirm(`Are you sure you want to change the status to ${newStatus}?`)) {
                    window.location.href = `view_orders.php?action=update_status&order_id=${orderId}&new_status=${newStatus}`;
                }
            }
        }

        // Function to cancel status change
        function cancelChangeStatus(orderId) {
            const controls = document.getElementById('changeStatusControls' + orderId);
            const originalButtons = controls.previousElementSibling; // action-buttons div

            controls.classList.remove('active');
            originalButtons.style.display = 'flex';
        }

        // Function to edit order
        function editOrder(orderId) {
            window.location.href = `edit_order.php?id=${orderId}`;
        }

        // Function to apply filters (on status change, priority change)
        function applyFilters() {
            const urlParams = new URLSearchParams(window.location.search);
            const statusFilter = document.getElementById('statusFilter').value;
            const priorityFilter = document.getElementById('priorityFilter').value;
            const ordersPerPage = document.getElementById('entriesPerPage').value;
            const fromDate = document.getElementById('fromDate').value;
            const toDate = document.getElementById('toDate').value;

            urlParams.set('status_filter', statusFilter);
            urlParams.set('priority_filter', priorityFilter);
            urlParams.set('orders_per_page', ordersPerPage);
            urlParams.set('from_date', fromDate);
            urlParams.set('to_date', toDate);
            urlParams.set('page', 1); // Reset to first page

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

        // Function to apply date filters separately
        function applyDateFilters() {
            applyFilters();
        }

        // Close action rows when clicking outside the table
        document.addEventListener('click', function(event) {
            const isClickInside = event.target.closest('.orders-table');
            if (!isClickInside) {
                document.querySelectorAll('.change-status-controls.active').forEach(function(el) {
                    el.classList.remove('active');
                    const siblings = el.previousElementSibling;
                    if (siblings) {
                        siblings.style.display = 'flex';
                    }
                });
            }
        });

        // Function to enable or disable the confirm button based on selection
        function validateChangeStatus(orderId) {
            const newStatus = document.getElementById('newStatus' + orderId).value;
            const confirmBtn = document.getElementById('confirmChangeStatusBtn' + orderId);
            if (newStatus) {
                confirmBtn.disabled = false;
            } else {
                confirmBtn.disabled = true;
            }
        }
    </script>
</body>
</html>
<?php
// Flush the output buffer
ob_end_flush();
// No closing PHP tag to prevent unwanted output
?>) and type full codes