{% extends "base.html" %}

{% block title %}{{ customer['CompanyName'] }} - Northwind Traders{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <a href="{{ url_for('customers') }}" class="btn btn-secondary">&larr; Back to Customers</a>
    <div>
        <a href="{{ url_for('customer_edit', customer_id=customer['CustomerID']) }}" 
           class="btn btn-warning">Edit Customer</a>
        <form method="POST" action="{{ url_for('customer_delete', customer_id=customer['CustomerID']) }}"
              style="display: inline;" onsubmit="return confirm('Delete this customer? This cannot be undone.')">
            <button type="submit" class="btn btn-danger">Delete Customer</button>
        </form>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Customer Information</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr><td><strong>ID:</strong></td><td>{{ customer['CustomerID'] }}</td></tr>
                    <tr><td><strong>Company:</strong></td><td>{{ customer['CompanyName'] }}</td></tr>
                    <tr><td><strong>Contact:</strong></td><td>{{ customer['ContactName'] or '-' }}</td></tr>
                    <tr><td><strong>Title:</strong></td><td>{{ customer['ContactTitle'] or '-' }}</td></tr>
                    <tr><td><strong>Address:</strong></td><td>{{ customer['Address'] or '-' }}</td></tr>
                    <tr><td><strong>City:</strong></td><td>{{ customer['City'] or '-' }}</td></tr>
                    <tr><td><strong>Region:</strong></td><td>{{ customer['Region'] or '-' }}</td></tr>
                    <tr><td><strong>Postal Code:</strong></td><td>{{ customer['PostalCode'] or '-' }}</td></tr>
                    <tr><td><strong>Country:</strong></td><td>{{ customer['Country'] or '-' }}</td></tr>
                    <tr><td><strong>Phone:</strong></td><td>{{ customer['Phone'] or '-' }}</td></tr>
                    <tr><td><strong>Fax:</strong></td><td>{{ customer['Fax'] or '-' }}</td></tr>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Order History</h5>
                <span class="badge bg-primary">{{ orders|length }} Orders</span>
            </div>
            <div class="card-body p-0">
                {% if orders %}
                <div class="table-responsive">
                    <table class="table table-striped mb-0">
                        <thead>
                            <tr>
                                <th>Order ID</th>
                                <th>Date</th>
                                <th>Shipper</th>
                                <th>Total Amount</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in orders %}
                            <tr>
                                <td><a href="{{ url_for('order_detail', order_id=order['OrderID']) }}">#{{ order['OrderID'] }}</a></td>
                                <td>{{ order['OrderDate'] }}</td>
                                <td>{{ order['Shipper'] }}</td>
                                <td>${{ "%.2f"|format(order['TotalAmount']) }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ url_for('order_detail', order_id=order['OrderID']) }}" 
                                           class="btn btn-outline-primary">View</a>
                                        <a href="{{ url_for('order_edit', order_id=order['OrderID']) }}" 
                                           class="btn btn-outline-secondary">Edit</a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-center py-4 text-muted">No orders found for this customer</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}