I'll help you modify the code to include the receipt generation functionality when the order status is changed to "Paid". Here's the updated code with the receipt generation feature:
<?php
// ... (previous code remains the same until the payment section)
// --- Handle payment
if (isset($_POST['pay_orders'])) {
// Mark all orders as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
// Update the amount tendered and calculate change for all pending orders
$total_orders = $wpdb->get_results("SELECT * FROM $table_name_order WHERE status = 'Pending'");
$receipt_data = []; // Store receipt data
foreach ($total_orders as $order) {
$total_amount = $order->total_amount;
$amount_change = $amount_tendered - $total_amount;
$wpdb->update($table_name_order, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_change
], ['id' => $order->id]);
// Get order items for receipt
$order_items = $wpdb->get_results($wpdb->prepare(
"SELECT p.name, oi.quantity, oi.unit_price, oi.amount
FROM $table_name_order_item oi
JOIN $table_name_product p ON oi.product_id = p.id
WHERE oi.order_id = %d",
$order->id
));
$receipt_data[] = [
'order_id' => $order->id,
'items' => $order_items,
'total_amount' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_change,
'date' => current_time('mysql')
];
}
// Log the payment action
log_inventory_action(
'update',
'order',
'Multiple Product',
"Marked all pending orders as paid"
);
// Check if receipt should be generated
if (isset($_POST['generate_receipt']) && $_POST['generate_receipt'] === 'yes') {
// Generate receipt for each order
foreach ($receipt_data as $receipt) {
generateReceipt($receipt);
}
}
wp_redirect($_SERVER['REQUEST_URI']);
exit;
}
// Function to generate receipt
function generateReceipt($order_data) {
$receipt = "
<div style='width: 300px; margin: 0 auto; font-family: Arial, sans-serif;'>
<h2 style='text-align: center; margin-bottom: 5px;'>ArKi Inventory</h2>
<h3 style='text-align: center; margin-top: 0; margin-bottom: 5px;'>Receipt of Order</h3>
<p style='text-align: center; margin-top: 0;'>" . date('Y-m-d H:i:s', strtotime($order_data['date'])) . "</p>
<hr>
<table style='width: 100%; border-collapse: collapse; margin-bottom: 10px;'>
<tr>
<th style='text-align: left; border-bottom: 1px solid #000; padding: 5px;'>Item</th>
<th style='text-align: right; border-bottom: 1px 0; padding: 5px;'>Qty</th>
<th style='text: right; border-bottom: 1px solid #000; padding: 5px;'>Price</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Total</th>
tr>
";
foreach ($order_data['items'] as $item) {
$receipt .= "
<tr>
<td style='padding: 5px;'>" . esc_html($item->name) . "</td>
<td style='text-align: right; padding: 5px;'>" . esc_html($item->quantity) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->unit_price, 2) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->amount, 2) . "</td>
</tr>
";
}
$receipt .= "
</table>
<hr>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Total: </strong>₱" . number_format($order_data['total_amount'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Tendered: </strong>₱" . number_format($order_data['amount_tendered'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Change: </strong>₱" . number_format($order_data['change'], 2) . "
</div>
<hr>
<p style='text-align: center; font-size: 12px;'>Thank you for your purchase!</p>
</div>
";
// This is where you would typically send the receipt to a printer
// For demo purposes, we'll just show it in a popup
echo "<script>
var receiptWindow = window.open('', 'Receipt', 'width=400,height=600');
receiptWindow.document.write('" . addslashes($receipt) . "');
receiptWindow.document.close();
receiptWindow.focus();
setTimeout(function() {
receiptWindow.print();
}, 500);
</script>";
}
// ... (rest of the code remains the same)
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... (previous head content remains the same) -->
<style>
/* Add this new style for receipt option */
.receipt-option {
margin: 20px 0;
padding: 15px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
.receipt-option label {
margin-right: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- ... (previous body content remains the same until the payment button section) -->
<div class="receipt-option">
<label>Generate Receipt:</label>
<input type="radio" name="generate_receipt" value="yes" id="receipt_yes" checked>
<label for="receipt_yes">Yes</label>
<input type="radio" name="generate_receipt" value="no" id="receipt_no">
<label for="receipt_no">No</label>
</div>
<div class="button-group">
<form method="post" action="">
<button type="submit" name="pay_orders" class="pay-btn"
style="padding: 5px 20px; color: #000000; border: none; cursor: pointer; text-align: middle; font-size: 18px; line-weight: 600px; margin-left: auto; display: block; background-color: #98FB98; border-radius: 5px; margin-top: 20px;">
Pay Now
</button>
<input type="hidden" name="amount_tendered" id="hidden_amount_tendered" value="">
</form>
<!-- ... (rest of the buttons remain the same) -->
</div>
<script>
// Update the hidden field with the amount tendered when submitting
document.querySelector('form').addEventListener('submit', function() {
document.getElementById('hidden_amount_tendered').value = document.getElementById('amount_tendered').value;
});
</script>
</body>
</html>
<?php
// ... (previous code remains the same until the payment section)
// --- Handle payment
if (isset($_POST['pay_orders'])) {
// Mark all orders as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
// Update the amount tendered and calculate change for all pending orders
$total_orders = $wpdb->get_results("SELECT * FROM $table_name_order WHERE status = 'Pending'");
$receipt_data = []; // Store receipt data
foreach ($total_orders as $order) {
$total_amount = $order->total_amount;
$amount_change = $amount_tendered - $total_amount;
$wpdb->update($table_name_order, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_change
], ['id' => $order->id]);
// Get order items for receipt
$order_items = $wpdb->get_results($wpdb->prepare(
"SELECT p.name, oi.quantity, oi.unit_price, oi.amount
FROM $table_name_order_item oi
JOIN $table_name_product p ON oi.product_id = p.id
WHERE oi.order_id = %d",
$order->id
));
$receipt_data[] = [
'order_id' => $order->id,
'items' => $order_items,
'total_amount' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_change,
'date' => current_time('mysql')
];
}
// Log the payment action
log_inventory_action(
'update',
'order',
'Multiple Product',
"Marked all pending orders as paid"
);
// Check if receipt should be generated
if (isset($_POST['generate_receipt']) && $_POST['generate_receipt'] === 'yes') {
// Generate receipt for each order
foreach ($receipt_data as $receipt) {
generateReceipt($receipt);
}
}
wp_redirect($_SERVER['REQUEST_URI']);
exit;
}
// Function to generate receipt
function generateReceipt($order_data) {
$receipt = "
<div style='width: 300px; margin: 0 auto; font-family: Arial, sans-serif;'>
<h2 style='text-align: center; margin-bottom: 5px;'>ArKi Inventory</h2>
<h3 style='text-align: center; margin-top: 0; margin-bottom: 5px;'>Receipt of Order</h3>
<p style='text-align: center; margin-top: 0;'>" . date('Y-m-d H:i:s', strtotime($order_data['date'])) . "</p>
<hr>
<table style='width: 100%; border-collapse: collapse; margin-bottom: 10px;'>
<tr>
<th style='text-align: left; border-bottom: 1px solid #000; padding: 5px;'>Item</th>
<th style='text-align: right; border-bottom: 1px 0; padding: 5px;'>Qty</th>
<th style='text: right; border-bottom: 1px solid #000; padding: 5px;'>Price</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Total</th>
tr>
";
foreach ($order_data['items'] as $item) {
$receipt .= "
<tr>
<td style='padding: 5px;'>" . esc_html($item->name) . "</td>
<td style='text-align: right; padding: 5px;'>" . esc_html($item->quantity) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->unit_price, 2) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->amount, 2) . "</td>
</tr>
";
}
$receipt .= "
</table>
<hr>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Total: </strong>₱" . number_format($order_data['total_amount'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Tendered: </strong>₱" . number_format($order_data['amount_tendered'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Change: </strong>₱" . number_format($order_data['change'], 2) . "
</div>
<hr>
<p style='text-align: center; font-size: 12px;'>Thank you for your purchase!</p>
</div>
";
// This is where you would typically send the receipt to a printer
// For demo purposes, we'll just show it in a popup
echo "<script>
var receiptWindow = window.open('', 'Receipt', 'width=400,height=600');
receiptWindow.document.write('" . addslashes($receipt) . "');
receiptWindow.document.close();
receiptWindow.focus();
setTimeout(function() {
receiptWindow.print();
}, 500);
</script>";
}
// ... (rest of the code remains the same)
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... (previous head content remains the same) -->
<style>
/* Add this new style for receipt option */
.receipt-option {
margin: 20px 0;
padding: 15px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
.receipt-option label {
margin-right: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- ... (previous body content remains the same until the payment button section) -->
<div class="receipt-option">
<label>Generate Receipt:</label>
<input type="radio" name="generate_receipt" value="yes" id="receipt_yes" checked>
<label for="receipt_yes">Yes</label>
<input type="radio" name="generate_receipt" value="no" id="receipt_no">
<label for="receipt_no">No</label>
</div>
<div class="button-group">
<form method="post" action="">
<button type="submit" name="pay_orders" class="pay-btn"
style="padding: 5px 20px; color: #000000; border: none; cursor: pointer; text-align: middle; font-size: 18px; line-weight: 600px; margin-left: auto; display: block; background-color: #98FB98; border-radius: 5px; margin-top: 20px;">
Pay Now
</button>
<input type="hidden" name="amount_tendered" id="hidden_amount_tendered" value="">
</form>
<!-- ... (rest of the buttons remain the same) -->
</div>
<script>
// Update the hidden field with the amount tendered when submitting
document.querySelector('form').addEventListener('submit', function() {
document.getElementById('hidden_amount_tendered').value = document.getElementById('amount_tendered').value;
});
</script>
</body>
</html>
Key changes made:
generateReceipt() function that formats the receipt with:
The receipt will be generated when:
The receipt includes all the required information:
The receipt will automatically open in a new window and trigger the browser's print dialog when the payment is processed.*
I understand the issue. The problem is that the receipt generation code is being executed before the page redirects, so the JavaScript for printing doesn't have time to run. Let's modify the approach to ensure the print window appears properly.
Here's the updated solution:
<?php
// ... (previous code remains the same until the payment section)
// --- Handle payment
if (isset($_POST['pay_orders'])) {
// Mark all orders as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
$generate_receipt = isset($_POST['generate_receipt']) ? $_POST['generate_receipt'] : 'no';
// Update the amount tendered and calculate change for all pending orders
$total_orders = $wpdb->get_results("SELECT * FROM $table_name_orders WHERE status = 'Pending'");
$receipt_data = []; // Store receipt data
foreach ($total_orders as $order) {
$total_amount = $order->total_amount;
$amount_change = $amount_tendered - $total_amount;
$wpdb->update($table_name_orders, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_change
], ['id' => $order->id]);
// Get order items for receipt
$order_items = $wpdb->get_results($wpdb->prepare(
"SELECT p.name, oi.quantity, oi.unit_price, oi.amount
FROM $table_name_order_items oi
JOIN $table_name_products p ON oi.product_id = p.id
WHERE oi.order_id = %d",
$order->id
));
$receipt_data[] = [
'order_id' => $order->id,
'items' => $order_items,
'total_amount' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_change,
'date' => current_time('mysql')
];
}
// Log the payment action
log_inventory_action(
'update',
'order',
'Multiple Products',
"Marked all pending orders as paid"
);
// Store receipt data in session if receipt should be generated
if ($generate_receipt === 'yes') {
$_SESSION['receipt_data'] = $receipt_data;
$_SESSION['print_receipt'] = true;
}
wp_redirect($_SERVER['REQUEST_URI']);
exit;
}
// ... (rest of the code remains the same until before the closing body tag)
?>
<!DOCTYPE html>
<html lang="en">
<!-- ... (previous head content remains the same) -->
<body>
<!-- ... (previous body content remains the same) -->
<script>
// Check if we need to print receipt after page reload
<?php if (isset($_SESSION['print_receipt']) && $_SESSION['print_receipt']): ?>
window.onload = function() {
<?php
$receipt_html = '';
foreach ($_SESSION['receipt_data'] as $receipt) {
$receipt_html .= "
<div style='width: 300px; margin: 0 auto; font-family: Arial, sans-serif;'>
<h2 style='text-align: center; margin-bottom: 5px;'>ArKi Inventory</h2>
<h3 style='text-align: center; margin-top: 0; margin-bottom: 5px;'>Receipt of Order</h3>
<p style='text-align: center; margin-top: 0;'>" . date('Y-m-d H:i:s', strtotime($receipt['date'])) . "</p>
<hr>
<table style='width: 100%; border-collapse: collapse; margin-bottom: 10px;'>
<tr>
<th style='text-align: left; border-bottom: 1px solid #000; padding: 5px;'>Item</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Qty</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Price</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Total</th>
</tr>";
foreach ($receipt['items'] as $item) {
$receipt_html .= "
<tr>
<td style='padding: 5px;'>" . esc_html($item->name) . "</td>
<td style='text-align: right; padding: 5px;'>" . esc_html($item->quantity) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->unit_price, 2) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->amount, 2) . "</td>
</tr>";
}
$receipt_html .= "
</table>
<hr>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Total: </strong>₱" . number_format($receipt['total_amount'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Tendered: </strong>₱" . number_format($receipt['amount_tendered'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Change: </strong>₱" . number_format($receipt['change'], 2) . "
</div>
<hr>
<p style='text-align: center; font-size: 12px;'>Thank you for your purchase!</p>
</div>";
}
// Clear the session data
unset($_SESSION['print_receipt']);
unset($_SESSION['receipt_data']);
?>
var receiptWindow = window.open('', 'Receipt', 'width=400,height=600');
receiptWindow.document.write(`<?php echo $receipt_html; ?>`);
receiptWindow.document.close();
receiptWindow.focus();
// Give the window time to load before printing
setTimeout(function() {
receiptWindow.print();
}, 500);
};
<?php endif; ?>
</script>
</body>
</html>
<?php
// ... (previous code remains the same until the payment section)
// --- Handle payment
if (isset($_POST['pay_orders'])) {
// Mark all orders as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
$generate_receipt = isset($_POST['generate_receipt']) ? $_POST['generate_receipt'] : 'no';
// Update the amount tendered and calculate change for all pending orders
$total_orders = $wpdb->get_results("SELECT * FROM $table_name_orders WHERE status = 'Pending'");
$receipt_data = []; // Store receipt data
foreach ($total_orders as $order) {
$total_amount = $order->total_amount;
$amount_change = $amount_tendered - $total_amount;
$wpdb->update($table_name_orders, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_change
], ['id' => $order->id]);
// Get order items for receipt
$order_items = $wpdb->get_results($wpdb->prepare(
"SELECT p.name, oi.quantity, oi.unit_price, oi.amount
FROM $table_name_order_items oi
JOIN $table_name_products p ON oi.product_id = p.id
WHERE oi.order_id = %d",
$order->id
));
$receipt_data[] = [
'order_id' => $order->id,
'items' => $order_items,
'total_amount' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_change,
'date' => current_time('mysql')
];
}
// Log the payment action
log_inventory_action(
'update',
'order',
'Multiple Products',
"Marked all pending orders as paid"
);
// Store receipt data in session if receipt should be generated
if ($generate_receipt === 'yes') {
$_SESSION['receipt_data'] = $receipt_data;
$_SESSION['print_receipt'] = true;
}
wp_redirect($_SERVER['REQUEST_URI']);
exit;
}
// ... (rest of the code remains the same until before the closing body tag)
?>
<!DOCTYPE html>
<html lang="en">
<!-- ... (previous head content remains the same) -->
<body>
<!-- ... (previous body content remains the same) -->
<script>
// Check if we need to print receipt after page reload
<?php if (isset($_SESSION['print_receipt']) && $_SESSION['print_receipt']): ?>
window.onload = function() {
<?php
$receipt_html = '';
foreach ($_SESSION['receipt_data'] as $receipt) {
$receipt_html .= "
<div style='width: 300px; margin: 0 auto; font-family: Arial, sans-serif;'>
<h2 style='text-align: center; margin-bottom: 5px;'>ArKi Inventory</h2>
<h3 style='text-align: center; margin-top: 0; margin-bottom: 5px;'>Receipt of Order</h3>
<p style='text-align: center; margin-top: 0;'>" . date('Y-m-d H:i:s', strtotime($receipt['date'])) . "</p>
<hr>
<table style='width: 100%; border-collapse: collapse; margin-bottom: 10px;'>
<tr>
<th style='text-align: left; border-bottom: 1px solid #000; padding: 5px;'>Item</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Qty</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Price</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Total</th>
</tr>";
foreach ($receipt['items'] as $item) {
$receipt_html .= "
<tr>
<td style='padding: 5px;'>" . esc_html($item->name) . "</td>
<td style='text-align: right; padding: 5px;'>" . esc_html($item->quantity) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->unit_price, 2) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->amount, 2) . "</td>
</tr>";
}
$receipt_html .= "
</table>
<hr>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Total: </strong>₱" . number_format($receipt['total_amount'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Tendered: </strong>₱" . number_format($receipt['amount_tendered'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Change: </strong>₱" . number_format($receipt['change'], 2) . "
</div>
<hr>
<p style='text-align: center; font-size: 12px;'>Thank you for your purchase!</p>
</div>";
}
// Clear the session data
unset($_SESSION['print_receipt']);
unset($_SESSION['receipt_data']);
?>
var receiptWindow = window.open('', 'Receipt', 'width=400,height=600');
receiptWindow.document.write(`<?php echo $receipt_html; ?>`);
receiptWindow.document.close();
receiptWindow.focus();
// Give the window time to load before printing
setTimeout(function() {
receiptWindow.print();
}, 500);
};
<?php endif; ?>
</script>
</body>
</html>
Key changes made:
Session Storage: Instead of trying to print immediately during payment processing, we now store the receipt data in the session.
Post-Redirect Printing: After the page reloads (from the redirect), we check the session for receipt data and print it using JavaScript's window.onload.
Cleaner Implementation: The receipt generation happens after the page has fully loaded, ensuring the print dialog has time to appear properly.
Session Cleanup: We clear the session data after printing to prevent duplicate prints on page refreshes.
This approach solves the timing issue where the print dialog wasn't appearing because:
The receipt will now properly appear in a new window and the print dialog will show up as expected when you click "Pay Now" with the "Generate Receipt" option set to "Yes".*
I understand the issue - the print window isn't appearing even when "Yes" is selected for receipt generation. Let's fix this by implementing a more reliable approach.
Here's the corrected solution:
<?php
// ... (all previous PHP code remains exactly the same until the payment handling section)
// --- Handle payment
if (isset($_POST['pay_orders'])) {
// Mark all orders as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
$generate_receipt = isset($_POST['generate_receipt']) ? $_POST['generate_receipt'] : 'no';
// Update the amount tendered and calculate change for all pending orders
$total_orders = $wpdb->get_results("SELECT * FROM $table_name_orders WHERE status = 'Pending'");
$receipt_data = []; // Store receipt data
foreach ($total_orders as $order) {
$total_amount = $order->total_amount;
$amount_change = $amount_tendered - $total_amount;
$wpdb->update($table_name_orders, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_change
], ['id' => $order->id]);
// Get order items for receipt
$order_items = $wpdb->get_results($wpdb->prepare(
"SELECT p.name, oi.quantity, oi.unit_price, oi.amount
FROM $table_name_order_items oi
JOIN $table_name_products p ON oi.product_id = p.id
WHERE oi.order_id = %d",
$order->id
));
$receipt_data[] = [
'order_id' => $order->id,
'items' => $order_items,
'total_amount' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_change,
'date' => current_time('mysql')
];
}
// Log the payment action
log_inventory_action(
'update',
'order',
'Multiple Products',
"Marked all pending orders as paid"
);
// Store receipt data in session if receipt should be generated
if ($generate_receipt === 'yes') {
$_SESSION['receipt_data'] = $receipt_data;
$_SESSION['print_receipt'] = true;
}
// Redirect to a separate page for printing
if ($generate_receipt === 'yes') {
wp_redirect(add_query_arg(['print_receipt' => '1'], $_SERVER['REQUEST_URI']));
} else {
wp_redirect($_SERVER['REQUEST_URI']);
}
exit;
}
// ... (rest of the PHP code remains the same until the HTML section)
?>
<!DOCTYPE html>
<html lang="en">
<!-- ... (head section remains exactly the same) -->
<body>
<!-- ... (all previous HTML content remains the same until the scripts section) -->
<script>
// Check if we need to print receipt from URL parameter
<?php if (isset($_GET['print_receipt']) && $_GET['print_receipt'] == '1' && isset($_SESSION['receipt_data'])): ?>
window.onload = function() {
<?php
$receipt_html = '';
foreach ($_SESSION['receipt_data'] as $receipt) {
$receipt_html .= "
<div style='width: 300px; margin: 0 auto; font-family: Arial, sans-serif;'>
<h2 style='text-align: center; margin-bottom: 5px;'>ArKi Inventory</h2>
<h3 style='text-align: center; margin-top: 0; margin-bottom: 5px;'>Receipt of Order</h3>
<p style='text-align: center; margin-top: 0;'>" . date('Y-m-d H:i:s', strtotime($receipt['date'])) . "</p>
<hr>
<table style='width: 100%; border-collapse: collapse; margin-bottom: 10px;'>
<tr>
<th style='text-align: left; border-bottom: 1px solid #000; padding: 5px;'>Item</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Qty</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Price</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Total</th>
</tr>";
foreach ($receipt['items'] as $item) {
$receipt_html .= "
<tr>
<td style='padding: 5px;'>" . esc_html($item->name) . "</td>
<td style='text-align: right; padding: 5px;'>" . esc_html($item->quantity) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->unit_price, 2) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->amount, 2) . "</td>
</tr>";
}
$receipt_html .= "
</table>
<hr>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Total: </strong>₱" . number_format($receipt['total_amount'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Tendered: </strong>₱" . number_format($receipt['amount_tendered'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Change: </strong>₱" . number_format($receipt['change'], 2) . "
</div>
<hr>
<p style='text-align: center; font-size: 12px;'>Thank you for your purchase!</p>
</div>";
}
// Clear the session data
unset($_SESSION['print_receipt']);
unset($_SESSION['receipt_data']);
?>
// Create a new window for printing
var printWindow = window.open('', '_blank', 'width=600,height=600');
printWindow.document.open();
printWindow.document.write(`
<html>
<head>
<title>Receipt</title>
<style>
body { font-family: Arial, sans-serif; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 5px; text-align: left; }
hr { border: 0; border-top: 1px solid #000; }
</style>
</head>
<body>
<?php echo $receipt_html; ?>
<script>
window.onload = function() {
setTimeout(function() {
window.print();
window.close();
}, 200);
};
</script>
</body>
</html>
`);
printWindow.document.close();
// Remove the print_receipt parameter from URL
if (window.history.replaceState) {
window.history.replaceState(null, null, window.location.pathname + window.location.search.replace(/[\?&]print_receipt=1/, ''));
}
};
<?php endif; ?>
</script>
<!-- ... (rest of the scripts remain the same) -->
</body>
</html>
<?php
// ... (all previous PHP code remains exactly the same until the payment handling section)
// --- Handle payment
if (isset($_POST['pay_orders'])) {
// Mark all orders as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
$generate_receipt = isset($_POST['generate_receipt']) ? $_POST['generate_receipt'] : 'no';
// Update the amount tendered and calculate change for all pending orders
$total_orders = $wpdb->get_results("SELECT * FROM $table_name_orders WHERE status = 'Pending'");
$receipt_data = []; // Store receipt data
foreach ($total_orders as $order) {
$total_amount = $order->total_amount;
$amount_change = $amount_tendered - $total_amount;
$wpdb->update($table_name_orders, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_change
], ['id' => $order->id]);
// Get order items for receipt
$order_items = $wpdb->get_results($wpdb->prepare(
"SELECT p.name, oi.quantity, oi.unit_price, oi.amount
FROM $table_name_order_items oi
JOIN $table_name_products p ON oi.product_id = p.id
WHERE oi.order_id = %d",
$order->id
));
$receipt_data[] = [
'order_id' => $order->id,
'items' => $order_items,
'total_amount' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_change,
'date' => current_time('mysql')
];
}
// Log the payment action
log_inventory_action(
'update',
'order',
'Multiple Products',
"Marked all pending orders as paid"
);
// Store receipt data in session if receipt should be generated
if ($generate_receipt === 'yes') {
$_SESSION['receipt_data'] = $receipt_data;
$_SESSION['print_receipt'] = true;
}
// Redirect to a separate page for printing
if ($generate_receipt === 'yes') {
wp_redirect(add_query_arg(['print_receipt' => '1'], $_SERVER['REQUEST_URI']));
} else {
wp_redirect($_SERVER['REQUEST_URI']);
}
exit;
}
// ... (rest of the PHP code remains the same until the HTML section)
?>
<!DOCTYPE html>
<html lang="en">
<!-- ... (head section remains exactly the same) -->
<body>
<!-- ... (all previous HTML content remains the same until the scripts section) -->
<script>
// Check if we need to print receipt from URL parameter
<?php if (isset($_GET['print_receipt']) && $_GET['print_receipt'] == '1' && isset($_SESSION['receipt_data'])): ?>
window.onload = function() {
<?php
$receipt_html = '';
foreach ($_SESSION['receipt_data'] as $receipt) {
$receipt_html .= "
<div style='width: 300px; margin: 0 auto; font-family: Arial, sans-serif;'>
<h2 style='text-align: center; margin-bottom: 5px;'>ArKi Inventory</h2>
<h3 style='text-align: center; margin-top: 0; margin-bottom: 5px;'>Receipt of Order</h3>
<p style='text-align: center; margin-top: 0;'>" . date('Y-m-d H:i:s', strtotime($receipt['date'])) . "</p>
<hr>
<table style='width: 100%; border-collapse: collapse; margin-bottom: 10px;'>
<tr>
<th style='text-align: left; border-bottom: 1px solid #000; padding: 5px;'>Item</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Qty</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Price</th>
<th style='text-align: right; border-bottom: 1px solid #000; padding: 5px;'>Total</th>
</tr>";
foreach ($receipt['items'] as $item) {
$receipt_html .= "
<tr>
<td style='padding: 5px;'>" . esc_html($item->name) . "</td>
<td style='text-align: right; padding: 5px;'>" . esc_html($item->quantity) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->unit_price, 2) . "</td>
<td style='text-align: right; padding: 5px;'>₱" . number_format($item->amount, 2) . "</td>
</tr>";
}
$receipt_html .= "
</table>
<hr>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Total: </strong>₱" . number_format($receipt['total_amount'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Tendered: </strong>₱" . number_format($receipt['amount_tendered'], 2) . "
</div>
<div style='text-align: right; margin-bottom: 5px;'>
<strong>Change: </strong>₱" . number_format($receipt['change'], 2) . "
</div>
<hr>
<p style='text-align: center; font-size: 12px;'>Thank you for your purchase!</p>
</div>";
}
// Clear the session data
unset($_SESSION['print_receipt']);
unset($_SESSION['receipt_data']);
?>
// Create a new window for printing
var printWindow = window.open('', '_blank', 'width=600,height=600');
printWindow.document.open();
printWindow.document.write(`
<html>
<head>
<title>Receipt</title>
<style>
body { font-family: Arial, sans-serif; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 5px; text-align: left; }
hr { border: 0; border-top: 1px solid #000; }
</style>
</head>
<body>
<?php echo $receipt_html; ?>
<script>
window.onload = function() {
setTimeout(function() {
window.print();
window.close();
}, 200);
};
</script>
</body>
</html>
`);
printWindow.document.close();
// Remove the print_receipt parameter from URL
if (window.history.replaceState) {
window.history.replaceState(null, null, window.location.pathname + window.location.search.replace(/[\?&]print_receipt=1/, ''));
}
};
<?php endif; ?>
</script>
<!-- ... (rest of the scripts remain the same) -->
</body>
</html>
Key improvements made:
Separate Print Page: Instead of trying to print during the same page load, we now redirect to a separate URL when printing is requested.
More Reliable Printing: The print functionality is now handled in a completely new window with its own HTML document, which is more reliable for printing.
Better Timing: The print command is executed after the new window has fully loaded, ensuring the content is ready before printing.
URL Cleanup: After printing, we clean up the URL by removing the print_receipt parameter.
Session Management: We properly clear the session data after using it for printing.
This solution should now reliably show the print dialog when:
The receipt will open in a new window and automatically trigger the print dialog. If the print dialog doesn't appear, you can still manually print from the new window that opens.*_
I understand you want to change the receipt generation to a simple confirmation dialog instead of a radio button selection. Here's the updated code:
<?php
// ... (previous PHP code remains the same until the payment handling section)
// --- Handle payment
if (isset($_POST['pay_orders'])) {
// Mark all order as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
// Update the amount tendered and calculate change for all pending orders
$total_orders = $wpdb->get_results("SELECT * FROM $table_name_orders WHERE status = 'Pending'");
$receipt_data = []; // Store receipt data
foreach ($total_orders as $order) {
$total_amount = $order->total_amount;
$amount_change = $amount_tendered - $total_amount;
$wpdb->update($table_name_orders, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_change
], ['id' => $order->id]);
// Get order items for receipt
$order_items = $wpdb->get_results($wpdb->prepare(
"SELECT p.name, oi.quantity, oi.unit_price, oi.amount
FROM $table_name_order_items oi
JOIN $table_name_products p ON oi.product_id = p.id
WHERE oi.order_id = %d",
$order->id
));
$receipt_data[] = [
'order_id' => $order->id,
'items' => $order_items,
'total_amount' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_change,
'date' => current_time('mysql')
];
}
// Log the payment action
log_inventory_action(
'update',
'order',
'Multiple products',
"Marked all pending orders as paid"
);
// Ask for receipt confirmation
echo '<script>
if(confirm("Do you want to print the receipt?")) {
window.open("receipt.php?order_id='.$order->id.'", "_blank");
}
window.location.href = "'.$_SERVER['REQUEST_URI'].'";
</script>';
exit;
}
// ... (rest of the PHP code remains the same)
?>
<!-- HTML part remains the same until the payment button section -->
<button type="submit" name="pay_orders" class="pay-btn"
style="padding: 5px 20px; color: #000000; border: none; cursor: pointer; text-align: center; font-size: 18px; line-height: 1.5; margin-left: auto; display: block; background-color: #98FB98; border-radius: 5px; margin-top: 20px;"
onclick="return confirm('Are you sure you want to proceed with payment?')">
Pay Now
</button>
<!-- Rest of the HTML remains the same -->
<?php
// ... (previous PHP code remains the same until the payment handling section)
// --- Handle payment
if (isset($_POST['pay_orders'])) {
// Mark all order as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
// Update the amount tendered and calculate change for all pending orders
$total_orders = $wpdb->get_results("SELECT * FROM $table_name_orders WHERE status = 'Pending'");
$receipt_data = []; // Store receipt data
foreach ($total_orders as $order) {
$total_amount = $order->total_amount;
$amount_change = $amount_tendered - $total_amount;
$wpdb->update($table_name_orders, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_change
], ['id' => $order->id]);
// Get order items for receipt
$order_items = $wpdb->get_results($wpdb->prepare(
"SELECT p.name, oi.quantity, oi.unit_price, oi.amount
FROM $table_name_order_items oi
JOIN $table_name_products p ON oi.product_id = p.id
WHERE oi.order_id = %d",
$order->id
));
$receipt_data[] = [
'order_id' => $order->id,
'items' => $order_items,
'total_amount' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_change,
'date' => current_time('mysql')
];
}
// Log the payment action
log_inventory_action(
'update',
'order',
'Multiple products',
"Marked all pending orders as paid"
);
// Ask for receipt confirmation
echo '<script>
if(confirm("Do you want to print the receipt?")) {
window.open("receipt.php?order_id='.$order->id.'", "_blank");
}
window.location.href = "'.$_SERVER['REQUEST_URI'].'";
</script>';
exit;
}
// ... (rest of the PHP code remains the same)
?>
<!-- HTML part remains the same until the payment button section -->
<button type="submit" name="pay_orders" class="pay-btn"
style="padding: 5px 20px; color: #000000; border: none; cursor: pointer; text-align: center; font-size: 18px; line-height: 1.5; margin-left: auto; display: block; background-color: #98FB98; border-radius: 5px; margin-top: 20px;"
onclick="return confirm('Are you sure you want to proceed with payment?')">
Pay Now
</button>
<!-- Rest of the HTML remains the same -->
Key changes made:
The receipt.php file should contain the receipt generation code that was previously in the main file. You'll need to create this file with the receipt generation logic.
This change makes the receipt generation a simple yes/no question rather than a radio button selection, which is what you requested. The receipt will only be generated if the user confirms they want it.*
I understand you want to simplify the receipt generation process to a simple confirmation dialog that will show the print dialog when confirmed. Here's the updated code:
<?php
// ... (previous PHP code remains the same until the payment handling section)
// --- Handle payment
if (isset($_POST['pay_order'])) {
// Mark the order as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
// Update the amount tendered and calculate change
$total_amount = 0; // Calculate total from order items
$order_id = 0; // Get the current order ID
$wpdb->update($table_name_orders, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_tendered - $total_amount
], ['id' => $order_id]);
// Log the payment action
log_inventory_action(
'update',
'order',
'Order #' . $order_id,
"Order marked as paid with amount tendered: " . $amount_tendered
);
// Set session variable to trigger print dialog
$_SESSION['print_receipt'] = true;
$_SESSION['receipt_data'] = [
'order_id' => $order_id,
'items' => [], // Add order items here
'total' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_tendered - $total_amount
];
wp_redirect($_SERVER['REQUEST_URI']);
exit;
}
// ... (rest of the PHP code remains the same)
?>
<!-- HTML part remains the same until the payment button section -->
<button type="submit" name="pay_order" class="pay-btn"
onclick="return confirm('Are you sure you want to proceed with payment?')">
Pay Now
</button>
<!-- Add this script to handle the print dialog -->
<script>
document.addEventListener('DOMContentLoaded', function() {
<?php if (isset($_SESSION['print_receipt']) && $_SESSION['print_receipt']): ?>
// Generate receipt HTML
const receiptHTML = `
<div style="width: 300px; margin: 0 auto; font-family: Arial, sans-serif;">
<h2 style="text-align: center;">ArKi Inventory</h2>
<h3 style="text-align: center;">Receipt</h3>
<p style="text-align: center;"><?= date('Y-m-d H:i:s') ?></p>
<hr>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 10px;">
<tr>
<th style="text-align: left; border-bottom: 1px solid #000;">Item</th>
<th style="text" align="right; border-bottom: 1px solid #000;">Qty</th>
<th style="text-align: right; border-bottom: 1px" solid #000;">Price</th>
<th style="text-align: right; border-bottom: 1px solid #000;">Total</th>
"</tr>
<?php foreach ($_SESSION['receipt_data']['items'] as $item): ?>
<tr>
<td><?= $item['name'] ?></td>
<td><?= $item['quantity'] ?></td>
<td><?= number_format($item['price'], 2) ?></td>
<td><?= number_format($item['total'], 2) ?></td>
</tr>
<?php endforeach ?>
</table>
<hr>
<p>Total: <?= number_format($_SESSION['receipt_data']['total'], 2) ?></p>
<p>Amount Tendered: <?= number_format($_SESSION['receipt_data']['amount_tendered'], 2) ?></p>
<p>Change: <?= number_format($_SESSION['receipt_data']['change'], 2) ?></p>
<hr>
<p style="text-align: center;">Thank you for your purchase!</p>
</div>
`;
// Open print dialog
const printWindow = window.open('', 'Receipt', 'width=600,height=600');
printWindow.document.write(receiptHTML);
printWindow.document.close();
printWindow.focus();
setTimeout(() => {
printWindow.print();
printWindow.close();
}, 500);
// Clear the session
<?php unset($_SESSION['print_receipt'], $_SESSION['receipt_data']); ?>
<?php endif; ?>
});
</script>
<?php
// ... (previous PHP code remains the same until the payment handling section)
// --- Handle payment
if (isset($_POST['pay_order'])) {
// Mark the order as paid
$amount_tendered = isset($_POST['amount_tendered']) ? floatval($_POST['amount_tendered']) : 0.00;
// Update the amount tendered and calculate change
$total_amount = 0; // Calculate total from order items
$order_id = 0; // Get the current order ID
$wpdb->update($table_name_orders, [
'status' => 'Paid',
'amount_tendered' => $amount_tendered,
'amount_change' => $amount_tendered - $total_amount
], ['id' => $order_id]);
// Log the payment action
log_inventory_action(
'update',
'order',
'Order #' . $order_id,
"Order marked as paid with amount tendered: " . $amount_tendered
);
// Set session variable to trigger print dialog
$_SESSION['print_receipt'] = true;
$_SESSION['receipt_data'] = [
'order_id' => $order_id,
'items' => [], // Add order items here
'total' => $total_amount,
'amount_tendered' => $amount_tendered,
'change' => $amount_tendered - $total_amount
];
wp_redirect($_SERVER['REQUEST_URI']);
exit;
}
// ... (rest of the PHP code remains the same)
?>
<!-- HTML part remains the same until the payment button section -->
<button type="submit" name="pay_order" class="pay-btn"
onclick="return confirm('Are you sure you want to proceed with payment?')">
Pay Now
</button>
<!-- Add this script to handle the print dialog -->
<script>
document.addEventListener('DOMContentLoaded', function() {
<?php if (isset($_SESSION['print_receipt']) && $_SESSION['print_receipt']): ?>
// Generate receipt HTML
const receiptHTML = `
<div style="width: 300px; margin: 0 auto; font-family: Arial, sans-serif;">
<h2 style="text-align: center;">ArKi Inventory</h2>
<h3 style="text-align: center;">Receipt</h3>
<p style="text-align: center;"><?= date('Y-m-d H:i:s') ?></p>
<hr>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 10px;">
<tr>
<th style="text-align: left; border-bottom: 1px solid #000;">Item</th>
<th style="text" align="right; border-bottom: 1px solid #000;">Qty</th>
<th style="text-align: right; border-bottom: 1px" solid #000;">Price</th>
<th style="text-align: right; border-bottom: 1px solid #000;">Total</th>
"</tr>
<?php foreach ($_SESSION['receipt_data']['items'] as $item): ?>
<tr>
<td><?= $item['name'] ?></td>
<td><?= $item['quantity'] ?></td>
<td><?= number_format($item['price'], 2) ?></td>
<td><?= number_format($item['total'], 2) ?></td>
</tr>
<?php endforeach ?>
</table>
<hr>
<p>Total: <?= number_format($_SESSION['receipt_data']['total'], 2) ?></p>
<p>Amount Tendered: <?= number_format($_SESSION['receipt_data']['amount_tendered'], 2) ?></p>
<p>Change: <?= number_format($_SESSION['receipt_data']['change'], 2) ?></p>
<hr>
<p style="text-align: center;">Thank you for your purchase!</p>
</div>
`;
// Open print dialog
const printWindow = window.open('', 'Receipt', 'width=600,height=600');
printWindow.document.write(receiptHTML);
printWindow.document.close();
printWindow.focus();
setTimeout(() => {
printWindow.print();
printWindow.close();
}, 500);
// Clear the session
<?php unset($_SESSION['print_receipt'], $_SESSION['receipt_data']); ?>
<?php endif; ?>
});
</script>
Key changes:
The receipt will now:
This provides a much simpler workflow for printing receipts while still giving users the option to cancel if they don't want to proceed with payment. The receipt will only be printed if the user confirms they want to proceed with payment.
I'll help you move the "Clear All" button to be on the same line as the search bar, aligned to the right. Here's the updated code:
<!-- In the HTML section, replace the search container and clear all button with this: -->
<div class="search-container" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<form method="GET" style="flex-grow: 1; margin-right: 10px;">
<div class="search-wrapper">
<input type="text" id="product-search" class="product-search-bar"
name="product_search" placeholder="Search history..."
value="<?php echo esc_attr($search_term); ?>">
<button type="button" class="clear-search-button"
onclick="this.form.product_search.value=''; this.form.submit()">
×
</button>
<button type="submit" class="search-submit-button">
<i class="fas fa-search"></i>
</button>
</div>
</form>
<?php if ($current_username === 'admin'): ?>
<form action="" method="get" onsubmit="return confirm('Are you sure you want to clear all inventory history?');">
<button type="submit" name="clear_all" value="true" class="clear-all-button">Clear All</button>
</form>
<?php endif; ?>
</div>
<!-- In the HTML section, replace the search container and clear all button with this: -->
<div class="search-container" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<form method="GET" style="flex-grow: 1; margin-right: 10px;">
<div class="search-wrapper">
<input type="text" id="product-search" class="product-search-bar"
name="product_search" placeholder="Search history..."
value="<?php echo esc_attr($search_term); ?>">
<button type="button" class="clear-search-button"
onclick="this.form.product_search.value=''; this.form.submit()">
×
</button>
<button type="submit" class="search-submit-button">
<i class="fas fa-search"></i>
</button>
</div>
</form>
<?php if ($current_username === 'admin'): ?>
<form action="" method="get" onsubmit="return confirm('Are you sure you want to clear all inventory history?');">
<button type="submit" name="clear_all" value="true" class="clear-all-button">Clear All</button>
</form>
<?php endif; ?>
</div>
And update the CSS to make the search bar and button align properly:
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.search-wrapper {
position: relative;
display: flex;
flex-grow: 1;
margin-right: 10px;
}
.product-search-bar {
padding: 8px 30px 8px 10px;
border: 5px solid #000000;
border-radius: 4px;
font-size: 15px;
font-family: inherit;
width: 100%;
box-sizing: border-box;
line-height: 1.5;
transition: border-color 0.5s ease-in-out;
}
.clear-all-button {
padding: 8px 15px;
background-color: #D1B48C;
color: black;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
white-space: nowrap;
}
.clear-all-button:hover {
background-color: #be9b7b;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.search-wrapper {
position: relative;
display: flex;
flex-grow: 1;
margin-right: 10px;
}
.product-search-bar {
padding: 8px 30px 8px 10px;
border: 5px solid #000000;
border-radius: 4px;
font-size: 15px;
font-family: inherit;
width: 100%;
box-sizing: border-box;
line-height: 1.5;
transition: border-color 0.5s ease-in-out;
}
.clear-all-button {
padding: 8px 15px;
background-color: #D1B48C;
color: black;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
white-space: nowrap;
}
.clear-all-button:hover {
background-color: #be9b7b;
}
Key changes:
flex-grow: 1This will place the "Clear All" button on the same line as the search bar, aligned to the right side of the container, while maintaining all the existing functionality.