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

// 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"></i>';
        } else {
            return '<i class="bi bi-arrow-down sort-icon"></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
    $digits = preg_replace('/\D+/', '', $contact);
    
    // Assuming Egypt country code (+20). Adjust as needed.
    if (substr($digits, 0, 2) !== '20') {
        $digits = '20' . $digits;
    }
    
    return "https://wa.me/" . $digits;
}

/**
 * Calculate totals for a given set of order items.
 *
 * @param array $order_items The array of order items.
 * @return array An associative array containing total_before_discounts, total_discounts, and final_total.
 */
function calculate_order_totals($order_items) {
    $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;

    return [
        'total_before_discounts' => $total_before_discounts,
        'total_discounts' => $total_discounts,
        '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', '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();
        }
    } 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,
        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=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; /* Button Background */
            --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);
            --critical-highlight: #FFF9C4; /* Light Yellow-Orange */
            --section-border: #e0e0e0;
        }

        /* ---------------------------------------------------
           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);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        /* ---------------------------------------------------
           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);
            animation: fadeIn 0.5s ease-in-out;
        }

        .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);
            animation: fadeIn 0.5s ease-in-out;
        }

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

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

        .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 .search-group,
        .filter-search-section .status-filter-group,
        .filter-search-section .priority-filter-group,
        .filter-search-section .entries-per-page-group,
        .filter-search-section .date-filter-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        /* Enhanced Styles for Search Input */
        .filter-search-section .search-group input {
            margin-left: 5px;
            width: 250px;
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid #ced4da;
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
        }

        .filter-search-section .search-group input:focus {
            border-color: var(--blue);
            box-shadow: 0 0 5px rgba(17, 138, 178, 0.5);
            outline: none;
        }

        /* Enhanced Styles for Search Button */
        .filter-search-section .search-group button {
            background-color: var(--blue);
            color: var(--white);
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            margin-left: 10px;
            cursor: pointer;
            transition: background-color var(--transition-speed), transform var(--transition-speed);
            display: flex;
            align-items: center;
            font-size: 14px;
        }

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

        /* Status Filter Dropdown */
        .filter-search-section .status-filter-group label {
            margin-left: 5px;
            margin-right: 10px;
            font-weight: 600;
        }

        .filter-search-section .status-filter-group select {
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid #ced4da;
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
            width: 150px;
        }

        .filter-search-section .status-filter-group select:focus {
            border-color: var(--blue);
            box-shadow: 0 0 5px rgba(17, 138, 178, 0.5);
            outline: none;
        }

        /* Priority Filter Dropdown */
        .filter-search-section .priority-filter-group label {
            margin-left: 5px;
            margin-right: 10px;
            font-weight: 600;
        }

        .filter-search-section .priority-filter-group select {
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid #ced4da;
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
            width: 150px;
        }

        .filter-search-section .priority-filter-group select:focus {
            border-color: var(--blue);
            box-shadow: 0 0 5px rgba(17, 138, 178, 0.5);
            outline: none;
        }

        /* Entries Per Page Dropdown */
        .filter-search-section .entries-per-page-group label {
            margin-left: 5px;
            margin-right: 10px;
            font-weight: 600;
        }

        .filter-search-section .entries-per-page-group select {
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid #ced4da;
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
            width: 100px;
        }

        .filter-search-section .entries-per-page-group select:focus {
            border-color: var(--blue);
            box-shadow: 0 0 5px rgba(17, 138, 178, 0.5);
            outline: none;
        }

        /* Date Filter Dropdown */
        .filter-search-section .date-filter-group label {
            margin-left: 5px;
            margin-right: 10px;
            font-weight: 600;
        }

        .filter-search-section .date-filter-group input {
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid #ced4da;
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
            width: 140px;
        }

        .filter-search-section .date-filter-group input:focus {
            border-color: var(--blue);
            box-shadow: 0 0 5px rgba(17, 138, 178, 0.5);
            outline: none;
        }

        /* ---------------------------------------------------
           7. Orders Table Styles
        ---------------------------------------------------- */
        .orders-table {
            width: 100%;
            border-collapse: collapse;
            border: 2px solid var(--dark-gray);
            font-size: 14px;
        }

        .orders-table th, 
        .orders-table td {
            padding: 15px;
            text-align: left;
            font-size: 14px;
            vertical-align: middle;
            border: 1px solid var(--dark-gray);
        }

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

        .orders-table th:hover {
            background-color: var(--blue);
        }

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

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

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

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

        /* 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;
        }

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

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

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

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

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

        .action-buttons .btn {
            padding: 8px 16px;
            font-size: 14px;
            border-radius: 5px;
            transition: transform var(--transition-speed);
        }

        .action-buttons .btn-edit {
            background-color: var(--blue);
            color: var(--white);
            border: none;
        }

        .action-buttons .btn-edit:hover {
            background-color: var(--dark-gray);
            color: var(--white);
            transform: scale(1.05);
        }

        .action-buttons .btn-change-status {
            background-color: var(--orange);
            color: var(--white);
            border: none;
        }

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

        .action-buttons .btn-delete {
            background-color: var(--red-pink);
            color: var(--white);
            border: none;
        }

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

        .action-buttons .btn-view {
            background-color: var(--soft-brown);
            color: var(--white);
            border: none;
        }

        .action-buttons .btn-view:hover {
            background-color: var(--divider-color);
            color: var(--white);
            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(--blue);
            border: 1px solid var(--blue);
            transition: background-color var(--transition-speed), color var(--transition-speed);
        }

        .pagination .page-item.active .page-link {
            background-color: var(--blue);
            color: var(--white);
            border-color: var(--blue);
        }

        .pagination .page-link:hover {
            background-color: var(--blue);
            color: var(--white);
        }

        .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;
        }

        /* ---------------------------------------------------
           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: 8px 12px;
            border-radius: 5px;
            border: 1px solid #ced4da;
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
        }

        .change-status-controls .form-select:focus {
            border-color: var(--blue);
            box-shadow: 0 0 5px rgba(17, 138, 178, 0.5);
            outline: none;
        }

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

        .change-status-controls .action-buttons-inline .btn {
            flex: 1;
        }

        /* ---------------------------------------------------
           12. Discount Styles
        ---------------------------------------------------- */
        .discount-info {
            margin-top: 5px;
            font-size: 12px;
            color: var(--red-pink);
        }

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

            .filter-search-section .search-group,
            .filter-search-section .status-filter-group,
            .filter-search-section .priority-filter-group,
            .filter-search-section .entries-per-page-group,
            .filter-search-section .date-filter-group {
                width: 100%;
                justify-content: space-between;
                margin-bottom: 10px;
            }

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

        @media (max-width: 768px) {
            /* Adjust filter and search input widths */
            .filter-search-section .search-group input,
            .filter-search-section .status-filter-group select,
            .filter-search-section .priority-filter-group select,
            .filter-search-section .entries-per-page-group select,
            .filter-search-section .date-filter-group input {
                width: 100%;
                margin: 5px 0;
            }

            .filter-search-section .search-group button {
                width: 100%;
                margin-top: 10px;
            }

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

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

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

            .action-buttons .btn-edit,
            .action-buttons .btn-change-status,
            .action-buttons .btn-delete,
            .action-buttons .btn-view {
                font-size: 12px;
                padding: 6px 12px;
            }
        }

        @media (max-width: 480px) {
            .header {
                padding: 15px 20px;
            }

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

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

            .filter-search-section .search-group input,
            .filter-search-section .status-filter-group select,
            .filter-search-section .priority-filter-group select,
            .filter-search-section .entries-per-page-group select,
            .filter-search-section .date-filter-group input {
                width: 100%;
                margin: 5px 0;
            }

            .filter-search-section .search-group button {
                width: 100%;
                margin-top: 10px;
            }

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

            .action-buttons .btn-edit,
            .action-buttons .btn-change-status,
            .action-buttons .btn-delete,
            .action-buttons .btn-view {
                font-size: 10px;
                padding: 5px 10px;
            }
        }
    </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() {
            var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'), {
                backdrop: 'static',
                keyboard: false
            });
        });
    </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 alert-success alert-success-custom" role="alert">
                Order status updated successfully!
            </div>
        <?php elseif ($_GET['success'] == 2): ?>
            <div class="alert alert-success alert-success-custom" role="alert">
                Order deleted successfully!
            </div>
        <?php endif; ?>
    <?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 elseif ($_GET['error'] == 4): ?>
            <div class="alert alert-danger alert-error-custom" role="alert">
                Failed to delete the order. Please try again.
            </div>
        <?php elseif ($_GET['error'] == 5): ?>
            <div class="alert alert-danger alert-error-custom" role="alert">
                Invalid order ID provided.
            </div>
        <?php endif; ?>
    <?php endif; ?>

    <?php if (isset($_GET['export']) && $_GET['export'] == 1): ?>
        <div class="alert alert-success alert-success-custom" role="alert">
            Orders exported successfully!
        </div>
    <?php endif; ?>

    <!-- Container -->
    <div class="recent-orders-section">
        <h4>All Orders <button class="btn btn-soft-brown btn-sm float-end" onclick="exportOrders()"><i class="bi bi-file-earmark-arrow-down-fill"></i> Export</button></h4>

        <!-- Filter and Search Section -->
        <div class="filter-search-section">
            <!-- Status Filter Dropdown -->
            <div class="status-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="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="priority-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="Default" <?php echo $priority_filter === 'Default' ? 'selected' : ''; ?>>Default</option>
                </select>
            </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 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 me-2 mb-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-outline-secondary ms-2 mb-2 btn-reset"><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 me-2 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 me-2 mb-2" placeholder="YYYY-MM-DD" value="<?php echo sanitize_input($to_date); ?>">
                
                <button class="btn btn-secondary mb-2" onclick="applyDateFilters()"><i class="bi bi-calendar-fill"></i> Apply</button>
            </div>

            <!-- Entries Per Page Dropdown -->
            <div class="entries-per-page-group">
                <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>
        </div>

        <!-- Pagination Information -->
        <div class="pagination-info mb-3">
            <?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>
                            Contact
                        </th>
                        <th>
                            Delivery Address
                        </th>
                        <th>
                            Products
                        </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>
                    </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 '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
                                $totals = calculate_order_totals($items);
                            ?>
                            <!-- 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']) ?>">
                                    <?= htmlspecialchars($order['order_id']) ?>
                                    <?php if ($is_new): ?>
                                        <span class="badge bg-warning text-dark ms-1"><i class="bi bi-star-fill"></i> New</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?= htmlspecialchars($order['customer_name']) ?>
                                </td>
                                <td>
                                    <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><?= nl2br(htmlspecialchars($order['delivery_address'])) ?></td>
                                <td>
                                    <?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>
                                                Packaging: <?= htmlspecialchars($item['packaging_preferences']) ?><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>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>
                                    <span class="<?= $badge_class ?>"><i class="bi bi-<?= $icon ?>"></i> <?= htmlspecialchars($order['status']) ?></span>
                                </td>
                                <td>
                                    <?= htmlspecialchars($order['priority']) ?>
                                </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>
                            </tr>

                            <!-- Action Row -->
                            <tr class="collapse" id="orderDetails<?= htmlspecialchars($order['order_id']) ?>">
                                <td colspan="9">
                                    <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="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="9" 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);
                            $query_params = array_merge($_GET, ['page' => $prev_page]);
                            echo http_build_query($query_params) ? '?' . http_build_query($query_params) : '';
                        ?>" 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
                                $query_params = array_merge($_GET, ['page' => $i]);
                                echo http_build_query($query_params) ? '?' . http_build_query($query_params) : '';
                            ?>"><?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);
                            $query_params = array_merge($_GET, ['page' => $next_page]);
                            echo http_build_query($query_params) ? '?' . http_build_query($query_params) : '';
                        ?>">Next</a>
                    </li>
                </ul>
            </nav>
        <?php endif; ?>


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

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel"><i class="bi bi-trash-fill"></i> Confirm Deletion</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this order? This action cannot be undone.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
      </div>
    </div>
  </div>
</div>
</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 and Popover 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"
        });

        flatpickr("#toDate", {
            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 using Bootstrap Modal
        function confirmDelete(orderId) {
            // Set up the delete action
            document.getElementById('confirmDeleteBtn').onclick = function() {
                window.location.href = 'delete_order.php?order_id=' + orderId;
            };

            // Show the modal
            var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }

        // 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) {
                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 validate Change Status button
        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;
            }
        }

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

        // Function to apply filters (on status change, priority change, date filters, and records per page)
        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';
                    }
                });
            }
        });
    </script>
</body>
</html>
<?php
// Flush the output buffer
ob_end_flush();
// No closing PHP tag to prevent unwanted output
?>) when i press on delete, it shows this ( Confirm Deletion

Are you sure you want to delete this order? This action cannot be undone.
Cancel Delete) next to delete buton and make it clear and has styles clear and add it in solid border to make it cool adn type full codes