canteenhub/app/Views/orders/show.php

<div class="page-header">
    <div>
        <h1 class="page-title">Order <?= e($order['order_number']) ?></h1>
        <p class="page-subtitle">Created on <?= date('F j, Y, g:i a', strtotime($order['created_at'])) ?></p>
    </div>
    <div style="display: flex; gap: 0.75rem;">
        <button type="button" class="btn btn-secondary" onclick="window.print()">🖨️ Print Invoice</button>
        <a href="/orders" class="btn btn-secondary">&larr; Back to Orders</a>
    </div>
</div>

<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start;">

    <!-- Left Column: Detailed Invoice -->
    <div class="invoice-card">
        <div class="invoice-header">
            <div>
                <h2 style="font-size: 1.5rem; font-weight: 700; color: var(--primary);">SimpleOrder</h2>
                <p style="color: var(--text-muted); font-size: 0.875rem;">Official Order Invoice</p>
            </div>
            <div class="invoice-meta">
                <div style="font-size: 1.1rem; font-weight: 700;"><?= e($order['order_number']) ?></div>
                <div style="margin-top: 0.25rem;">
                    <span class="badge badge-<?= strtolower(e($order['status'])) ?>">
                        Status: <?= e($order['status']) ?>
                    </span>
                </div>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
            <div>
                <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;">Billed To:</h4>
                <div style="font-weight: 600; font-size: 1.05rem;"><?= e($order['customer_name']) ?></div>
                <div style="color: var(--text-muted); font-size: 0.9rem;"><?= e($order['customer_email']) ?></div>
                <?php if (!empty($order['customer_phone'])): ?>
                    <div style="color: var(--text-muted); font-size: 0.9rem;"><?= e($order['customer_phone']) ?></div>
                <?php endif; ?>
                <?php if (!empty($order['customer_address'])): ?>
                    <div style="color: var(--text-muted); font-size: 0.9rem; margin-top: 0.25rem;"><?= nl2br(e($order['customer_address'])) ?></div>
                <?php endif; ?>
            </div>

            <div>
                <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;">Order Details:</h4>
                <div style="font-size: 0.9rem; margin-bottom: 0.25rem;"><strong>Date:</strong> <?= date('M d, Y', strtotime($order['created_at'])) ?></div>
                <div style="font-size: 0.9rem; margin-bottom: 0.25rem;"><strong>Payment Status:</strong> Paid / Pending</div>
                <div style="font-size: 0.9rem;"><strong>Last Updated:</strong> <?= date('M d, Y H:i', strtotime($order['updated_at'] ?? $order['created_at'])) ?></div>
            </div>
        </div>

        <!-- Items Table -->
        <table class="table" style="margin-bottom: 1.5rem;">
            <thead>
                <tr>
                    <th>Item Description</th>
                    <th>SKU</th>
                    <th style="text-align: right;">Unit Price</th>
                    <th style="text-align: center;">Qty</th>
                    <th style="text-align: right;">Amount</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($order['items'] as $item): ?>
                    <tr>
                        <td>
                            <div style="font-weight: 600;"><?= e($item['product_name']) ?></div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);"><?= e($item['category'] ?? 'Product') ?></div>
                        </td>
                        <td style="font-family: monospace; font-size: 0.85rem;"><?= e($item['sku'] ?? 'N/A') ?></td>
                        <td style="text-align: right;"><?= money($item['unit_price']) ?></td>
                        <td style="text-align: center; font-weight: 600;"><?= e($item['quantity']) ?></td>
                        <td style="text-align: right; font-weight: 600;"><?= money($item['total_price']) ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <!-- Totals Breakdown -->
        <div class="order-summary-box">
            <div class="summary-row">
                <span style="color: var(--text-muted);">Subtotal:</span>
                <span><?= money($order['subtotal']) ?></span>
            </div>
            <div class="summary-row">
                <span style="color: var(--text-muted);">Tax:</span>
                <span><?= money($order['tax']) ?></span>
            </div>
            <?php if ((float)$order['discount'] > 0): ?>
                <div class="summary-row" style="color: var(--danger);">
                    <span>Discount:</span>
                    <span>-<?= money($order['discount']) ?></span>
                </div>
            <?php endif; ?>
            <div class="summary-row summary-total">
                <span>Grand Total:</span>
                <span><?= money($order['total']) ?></span>
            </div>
        </div>

        <?php if (!empty($order['notes'])): ?>
            <div style="margin-top: 2rem; padding: 1rem; background-color: #f8fafc; border-left: 3px solid var(--primary);">
                <div style="font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem;">Order Notes:</div>
                <div style="font-size: 0.9rem; color: var(--text-muted);"><?= nl2br(e($order['notes'])) ?></div>
            </div>
        <?php endif; ?>
    </div>

    <!-- Right Column: Status Controls & Actions -->
    <div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Update Status</h3>
            </div>
            <div class="card-body">
                <form method="POST" action="/orders/<?= e($order['id']) ?>/status">
                    <?= \App\Core\View::csrfField() ?>
                    <div class="form-group">
                        <label class="form-label">Current Status</label>
                        <select name="status" class="form-select">
                            <option value="Pending" <?= $order['status'] === 'Pending' ? 'selected' : '' ?>>Pending</option>
                            <option value="Processing" <?= $order['status'] === 'Processing' ? 'selected' : '' ?>>Processing</option>
                            <option value="Completed" <?= $order['status'] === 'Completed' ? 'selected' : '' ?>>Completed</option>
                            <option value="Cancelled" <?= $order['status'] === 'Cancelled' ? 'selected' : '' ?>>Cancelled</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%;">Update Order Status</button>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title" style="color: var(--danger);">Danger Zone</h3>
            </div>
            <div class="card-body">
                <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem;">Permanently remove this order and its associated records.</p>
                <form method="POST" action="/orders/<?= e($order['id']) ?>/delete" onsubmit="return confirm('Are you sure you want to permanently delete this order?');">
                    <?= \App\Core\View::csrfField() ?>
                    <button type="submit" class="btn btn-danger" style="width: 100%;">Delete Order</button>
                </form>
            </div>
        </div>
    </div>

</div>