{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/order_details.css') }}">
{% endblock %}

{% block content %}
<div class="order-details-container">
  <h2>Order #{{ order.id }}</h2>

  <div class="order-meta">
    <p><strong>Order Date:</strong> {{ order.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
    <div class="order-status">
      <span class="status-label">Status:</span>
      <span class="status-badge status-{{ order.status }}">
        {{ order.status|title }}
      </span>
    </div>
  </div>

  <div class="items-section">
    <h3>Order Items</h3>

    {% if order.items %}
    <table class="items-table">
      <thead>
        <tr>
          <th>Product</th>
          <th>Quantity</th>
          <th>Price</th>
          <th>Subtotal</th>
        </tr>
      </thead>
      <tbody>
        {% for item in order.items %}
        <tr>
          <td class="product-cell">
            <div class="product-image">
              <img src="{{ item.product.get_image_url() }}" alt="{{ item.product.name }}">
            </div>
            <div class="product-info">
              <div class="product-name">{{ item.product.name }}</div>
              {% if item.selected_size or item.selected_color %}
              <div class="product-variants">
                {% if item.selected_size %}Size: {{ item.selected_size }}{% endif %}
                {% if item.selected_color %} | Color: {{ item.selected_color }}{% endif %}
              </div>
              {% endif %}
            </div>
          </td>
          <td class="quantity-cell">{{ item.quantity }}</td>
          <td class="price-cell">${{ "%.2f"|format(item.product.price) }}</td>
          <td class="subtotal-cell">${{ "%.2f"|format(item.product.price * item.quantity) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <div class="order-summary">
      <div class="summary-row">
        <span class="summary-label">Subtotal:</span>
        <span class="summary-value">
          ${{ "%.2f"|format(order.items|sum(attribute='product.price') * order.items|sum(attribute='quantity')) }}
        </span>
      </div>
      <div class="summary-row">
        <span class="summary-label">Shipping:</span>
        <span class="summary-value">Free</span>
      </div>
      <div class="summary-row">
        <span class="summary-label">Total:</span>
        <span class="summary-value">
          ${{ "%.2f"|format(order.items|sum(attribute='product.price') * order.items|sum(attribute='quantity')) }}
        </span>
      </div>
    </div>
    {% else %}
    <div class="no-items">
      <p>No items in this order.</p>
    </div>
    {% endif %}
  </div>

  <div class="order-actions">
    <a href="{{ url_for('user.profile') }}" class="btn-back">
      ← Back to My Orders
    </a>
    <button onclick="window.print()" class="btn-print">
      📄 Print Order
    </button>
  </div>
</div>
{% endblock %}