{% extends 'base.html' %}
{% block title %}{{ po.reference }}{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <h1 class="text-2xl font-bold">{{ po.reference }}</h1>
  <div class="flex gap-2">
    <a href="{% url 'inventory:po_list' %}" class="btn btn-ghost btn-sm">← Back</a>
    {% if po.status == 'pending' %}
      <a href="{% url 'inventory:po_receive' po.pk %}"
         class="btn btn-success btn-sm">
        ✅ Mark Received
      </a>
      {% if request.user.is_owner or request.user.is_manager %}
        <a href="{% url 'inventory:po_cancel' po.pk %}"
           class="btn btn-error btn-outline btn-sm"
           onclick="return confirm('Cancel this order?')">
          ✕ Cancel
        </a>
      {% endif %}
    {% endif %}
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">

  <!-- Order Info -->
  <div class="card bg-base-100 shadow lg:col-span-2">
    <div class="card-body">
      <h2 class="card-title text-base">Order Info</h2>
      <div class="grid grid-cols-2 gap-3 text-sm">
        <div>
          <div class="text-base-content/50">Supplier</div>
          <div class="font-medium">
            <a href="{% url 'inventory:supplier_detail' po.supplier.pk %}"
               class="link link-primary">
              {{ po.supplier.name }}
            </a>
          </div>
        </div>
        <div>
          <div class="text-base-content/50">Status</div>
          <span class="badge
            {% if po.status == 'received' %}badge-success
            {% elif po.status == 'pending' %}badge-warning
            {% else %}badge-ghost{% endif %}">
            {{ po.get_status_display }}
          </span>
        </div>
        <div>
          <div class="text-base-content/50">Order Date</div>
          <div class="font-medium">{{ po.date|date:"d M Y" }}</div>
        </div>
        {% if po.received_date %}
        <div>
          <div class="text-base-content/50">Received Date</div>
          <div class="font-medium text-success">{{ po.received_date|date:"d M Y" }}</div>
        </div>
        {% endif %}
        <div>
          <div class="text-base-content/50">Payment Account</div>
          <div class="font-medium">{{ po.account.name|default:"Not specified" }}</div>
        </div>
        <div>
          <div class="text-base-content/50">Created By</div>
          <div class="font-medium">{{ po.created_by.username|default:"—" }}</div>
        </div>
      </div>
      {% if po.note %}
        <div class="mt-3 text-sm text-base-content/60">📝 {{ po.note }}</div>
      {% endif %}
    </div>
  </div>

  <!-- Total -->
  <div class="stat bg-base-100 shadow rounded-box">
    <div class="stat-title">Order Total</div>
    <div class="stat-value text-2xl text-primary">
      {{ po.total|floatformat:0 }}
    </div>
    <div class="stat-desc">{{ po.items.count }} item(s)</div>
  </div>

</div>

<!-- Items -->
<div class="card bg-base-100 shadow">
  <div class="card-body">
    <h2 class="card-title text-base">Items</h2>
    <table class="table table-sm">
      <thead>
        <tr>
          <th>Product</th>
          <th>Quantity</th>
          <th>Unit Cost</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        {% for item in po.items.all %}
        <tr>
          <td>{{ item.product.name }}</td>
          <td>{{ item.quantity }} {{ item.product.unit }}</td>
          <td>{{ item.unit_cost|floatformat:0 }}</td>
          <td class="font-medium">{{ item.line_total|floatformat:0 }}</td>
        </tr>
        {% endfor %}
        <tr class="font-bold border-t-2">
          <td colspan="3">Total</td>
          <td>{{ po.total|floatformat:0 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
{% endblock %}