<%- include('partials/header') %>
<div class="order-detail">
    <h2>Order #<%= order.id %> Details</h2>
    <div class="order-info">
        <div class="info-section">
            <h3>Order Information</h3>
            <p><strong>Date:</strong> <%= new Date(order.created_at).toLocaleString() %></p>
            <p><strong>Status:</strong> <span class="status-badge <%= order.status.toLowerCase() %>"><%= order.status %></span></p>
            <p><strong>Total Amount:</strong> ฿<%= order.total_amount.toLocaleString() %></p>
        </div>
        
        <div class="info-section">
            <h3>Shipping Address</h3>
            <p><%= order.shipping_address %></p>
        </div>
    </div>

    <div class="order-items-detail">
        <h3>Order Items</h3>
        <div class="items-grid">
            <table>
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Product ID</th>
                        <th>Product Name</th>
                        <th>Quantity</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <% items.forEach(item => { %>
                        <tr>
                            <td><%= item.order_id %></td>
                            <td><%= item.product_id %></td>
                            <td><%= item.name %></td>
                            <td><%= item.quantity %></td>
                            <td>฿<%= item.price.toFixed(2) %></td>
                        </tr>
                    <% }) %>
                </tbody>
            </table>
        </div>
    </div>
</div>
<%- include('partials/footer') %>