{% extends "base.html" %}

{% block title %}Order #{{ order['OrderID'] }} - Northwind Traders{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <a href="{{ url_for('orders') }}" class="btn btn-secondary">&larr; Back to Orders</a>
    <div>
        <a href="{{ url_for('order_edit', order_id=order['OrderID']) }}" 
           class="btn btn-warning">Edit Order</a>
        <form method="POST" action="{{ url_for('order_delete', order_id=order['OrderID']) }}"
              style="display: inline;" onsubmit="return confirm('Delete this order? This cannot be undone.')">
            <button type="submit" class="btn btn-danger">Delete Order</button>
        </form>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-3">
            <div class="card-header">
                <h5>Order Information</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr><td><strong>Order ID:</strong></td><td>{{ order['OrderID'] }}</td></tr>
                    <tr><td><strong>Customer:</strong></td><td>{{ order['CustomerName'] }}</td></tr>
                    <tr><td><strong>Employee:</strong></td><td>{{ order['EmployeeName'] }}</td></tr>
                    <tr><td><strong>Order Date:</strong></td><td>{{ order['OrderDate'] }}</td></tr>
                </table>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5>Shipping Information</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr><td><strong>Ship Name:</strong></td><td>{{ order['ShipName'] or '-' }}</td></tr>
                    <tr><td><strong>Address:</strong></td><td>{{ order['ShipAddress'] or '-' }}</td></tr>
                    <tr><td><strong>City:</strong></td><td>{{ order['ShipCity'] or '-' }}</td></tr>
                    <tr><td><strong>Region:</strong></td><td>{{ order['ShipRegion'] or '-' }}</td></tr>
                    <tr><td><strong>Postal Code:</strong></td><td>{{ order['ShipPostalCode'] or '-' }}</td></tr>
                    <tr><td><strong>Country:</strong></td><td>{{ order['ShipCountry'] or '-' }}</td></tr>
                    <tr><td><strong>Shipper:</strong></td><td>{{ order['Shipper'] or '-' }}</td></tr>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Order Items</h5>
                <span class="badge bg-primary">{{ items|length }} items</span>
            </div>
            <div class="card-body p-0">
                {% if items %}
                <div class="table-responsive">
                    <table class="table table-striped mb-0">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Unit Price</th>
                                <th>Qty</th>
                                <th>Discount</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in items %}
                            <tr>
                                <td>{{ item['ProductName'] }}</td>
                                <td>${{ "%.2f"|format(item['UnitPrice']) }}</td>
                                <td>{{ item['Quantity'] }}</td>
                                <td>{{ (item['Discount'] * 100)|int }}%</td>
                                <td>${{ "%.2f"|format(item['UnitPrice'] * item['Quantity'] * (1 - item['Discount'])) }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-center py-4 text-muted">No items in this order</p>
                {% endif %}
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <span><strong>Subtotal:</strong></span>
                    <span>${{ "%.2f"|format(subtotal) }}</span>
                </div>
                <hr>
                <div class="d-flex justify-content-between fs-5">
                    <span><strong>Total:</strong></span>
                    <span><strong>${{ "%.2f"|format(subtotal) }}</strong></span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}