{% extends 'core/base.html' %}
{% load currency_filters %}
{% load static %}

{% block title %}Purchase Order #{{ order.id }} — SwiftPOS{% endblock %}
{% block topbar_title %}Purchase Order #{{ order.id }}{% endblock %}

{% block extra_css %}
<style>
.po-header-card {
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
}
.po-badge {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f1f5f9;
}
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 0.78rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.info-value { font-size: 0.92rem; color: #1e293b; font-weight: 600; }
.items-card {
  border: none;
  border-radius: 20px;
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}
.items-table th { background: #f8fafc; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: 0.4px; border-bottom: 2px solid #e2e8f0; }
.items-table td { vertical-align: middle; padding: 0.75rem 1rem; font-size: 0.88rem; border-bottom: 1px solid #f1f5f9; }
.items-table tbody tr:last-child td { border-bottom: none; }
.total-row { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.btn-receive {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 12px;
  font-weight: 700;
  padding: 0.65rem 1.5rem;
  color: #fff;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.btn-receive:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,185,129,0.4); color: #fff; }
.btn-receive:active { transform: translateY(0); }
.status-timeline { list-style: none; padding: 0; margin: 0; }
.status-timeline li {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  color: #64748b;
  border-bottom: 1px solid #f1f5f9;
}
.status-timeline li:last-child { border-bottom: none; }
.status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-0 pb-5">

  <!-- Page Header -->
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
    <div>
      <h5 class="mb-0 fw-bold">Purchase Order</h5>
      <div class="text-muted small">
        <a href="{% url 'inventory:supplier_detail' order.supplier.id %}" class="text-decoration-none">{{ order.supplier.name }}</a>
        &rsaquo; PO #{{ order.id }}
      </div>
    </div>
    <div class="d-flex gap-2 flex-wrap">
      <a href="{% url 'inventory:purchase_order_list' %}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
        <i class="fas fa-arrow-left me-1"></i> All Orders
      </a>
      <a href="{% url 'inventory:supplier_detail' order.supplier.id %}" class="btn btn-outline-primary btn-sm rounded-pill px-3">
        <i class="fas fa-store me-1"></i> Supplier
      </a>
    </div>
  </div>

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }} alert-dismissible fade show mb-4" style="border-radius:12px;" role="alert">
        {{ message }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    {% endfor %}
  {% endif %}

  <div class="row g-4">

    <!-- Left: Meta info + Actions -->
    <div class="col-lg-4">

      <!-- Status Card -->
      <div class="card po-header-card mb-4">
        <div class="card-body p-4">
          <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
              <div class="small text-muted mb-1 fw-semibold">STATUS</div>
              <span class="po-badge
                {% if order.status == 'received' %}bg-success-subtle text-success
                {% elif order.status == 'ordered' %}bg-primary-subtle text-primary
                {% elif order.status == 'draft' %}bg-secondary-subtle text-secondary
                {% else %}bg-danger-subtle text-danger{% endif %}">
                <i class="fas
                  {% if order.status == 'received' %}fa-check-circle
                  {% elif order.status == 'ordered' %}fa-paper-plane
                  {% elif order.status == 'draft' %}fa-file-lines
                  {% else %}fa-times-circle{% endif %} me-1"></i>
                {{ order.get_status_display }}
              </span>
            </div>
            <div class="text-end">
              <div class="small text-muted mb-1">Total Cost</div>
              <div class="fw-bold fs-4" style="color:#4F46E5;">{% money order.total_cost %}</div>
            </div>
          </div>

          <div class="info-row">
            <span class="info-label">Supplier</span>
            <span class="info-value">{{ order.supplier.name }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">Reference</span>
            <span class="info-value">{{ order.reference_number|default:"—" }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">Date Ordered</span>
            <span class="info-value">{{ order.date_ordered|date:"M j, Y"|default:"—" }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">Date Received</span>
            <span class="info-value {% if order.date_received %}text-success{% endif %}">
              {{ order.date_received|date:"M j, Y"|default:"—" }}
            </span>
          </div>
          {% if order.notes %}
          <div class="info-row">
            <span class="info-label">Notes</span>
            <span class="info-value small">{{ order.notes }}</span>
          </div>
          {% endif %}

          {% if order.status != 'received' and order.status != 'cancelled' %}
          <div class="mt-4">
            <a href="{% url 'inventory:purchase_order_mark_received' order.id %}"
               class="btn btn-receive w-100">
              <i class="fas fa-boxes-packing me-2"></i>Mark as Received & Update Stock
            </a>
            <div class="text-center small text-muted mt-2">
              This will add all quantities to inventory stock.
            </div>
          </div>
          {% elif order.status == 'received' %}
          <div class="mt-4 text-center">
            <div class="py-3 px-4 rounded-3" style="background:#f0fdf4; border:1px solid #bbf7d0;">
              <i class="fas fa-check-circle text-success fs-4 mb-2 d-block"></i>
              <div class="small fw-semibold text-success">Goods received & stock updated</div>
              <div class="text-muted" style="font-size:0.75rem;">{{ order.date_received|date:"M j, Y" }}</div>
            </div>
            <a href="{% url 'inventory:supplier_record_payment' order.supplier.id %}?prefill={{ order.total_cost }}&po={{ order.id }}"
               class="btn btn-outline-success btn-sm mt-3 rounded-pill px-4">
              <i class="fas fa-money-bill-wave me-1"></i> Pay Supplier
            </a>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Supplier Quick Info -->
      <div class="card border-0 shadow-sm" style="border-radius:16px;">
        <div class="card-body p-4">
          <h6 class="fw-bold mb-3 text-muted text-uppercase" style="font-size:0.72rem;">
            <i class="fas fa-store me-2"></i>Supplier Info
          </h6>
          {% if order.supplier.phone %}
          <div class="d-flex align-items-center gap-2 mb-2 small">
            <i class="fas fa-phone text-muted" style="width:16px;"></i>
            <span>{{ order.supplier.phone }}</span>
          </div>
          {% endif %}
          {% if order.supplier.email %}
          <div class="d-flex align-items-center gap-2 mb-2 small">
            <i class="fas fa-envelope text-muted" style="width:16px;"></i>
            <span>{{ order.supplier.email }}</span>
          </div>
          {% endif %}
          {% if order.supplier.address %}
          <div class="d-flex align-items-start gap-2 small">
            <i class="fas fa-map-marker-alt text-muted mt-1" style="width:16px;"></i>
            <span>{{ order.supplier.address }}</span>
          </div>
          {% endif %}
          <div class="mt-3 pt-3 border-top">
            <div class="d-flex justify-content-between align-items-center small">
              <span class="text-muted">Outstanding Balance</span>
              <span class="fw-bold {% if order.supplier.balance > 0 %}text-danger{% else %}text-success{% endif %}">
                {% money order.supplier.balance %}
              </span>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Right: Order Items -->
    <div class="col-lg-8">
      <div class="card items-card">
        <div class="card-header bg-white border-0 px-4 pt-4 pb-3">
          <div class="d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold"><i class="fas fa-list-ul me-2 text-primary"></i>Order Items</h6>
            <span class="badge bg-primary-subtle text-primary rounded-pill">
              {{ order.items.count }} item{{ order.items.count|pluralize }}
            </span>
          </div>
        </div>
        <div class="card-body p-0">
          <div class="sp-table-container">
            <table class="table items-table mb-0">
              <thead>
                <tr>
                  <th class="ps-4">Product</th>
                  <th class="text-center">Qty</th>
                  <th class="text-end">Unit Cost</th>
                  <th class="text-end pe-4">Line Total</th>
                </tr>
              </thead>
              <tbody>
                {% for item in order.items.all %}
                <tr>
                  <td class="ps-4">
                    <div class="fw-semibold">{{ item.product.name }}</div>
                    {% if item.product.sku %}
                      <div class="text-muted" style="font-size:0.75rem;">SKU: {{ item.product.sku }}</div>
                    {% endif %}
                  </td>
                  <td class="text-center">
                    <span class="badge bg-light text-dark border fw-semibold px-3">{{ item.quantity }}</span>
                  </td>
                  <td class="text-end">{% money item.unit_cost %}</td>
                  <td class="text-end pe-4 fw-bold">{% money item.line_total %}</td>
                </tr>
                {% empty %}
                <tr>
                  <td colspan="4" class="text-center py-5 text-muted">
                    <i class="fas fa-box-open fs-3 mb-2 d-block text-muted"></i>
                    No items on this purchase order.
                  </td>
                </tr>
                {% endfor %}
              </tbody>
              {% if order.items.count > 0 %}
              <tfoot>
                <tr class="total-row">
                  <td colspan="3" class="ps-4 fw-bold text-white text-uppercase" style="font-size:0.8rem; letter-spacing:0.5px;">
                    Order Total
                  </td>
                  <td class="text-end pe-4 fw-bold text-white fs-5">
                    {% money order.total_cost %}
                  </td>
                </tr>
              </tfoot>
              {% endif %}
            </table>
          </div>
        </div>
      </div>

      {% if order.status == 'received' %}
      <!-- Stock Impact summary -->
      <div class="card border-0 shadow-sm mt-4" style="border-radius:16px;">
        <div class="card-body p-4">
          <h6 class="fw-bold mb-3"><i class="fas fa-warehouse me-2 text-success"></i>Stock Impact</h6>
          <p class="small text-muted mb-3">The following quantities were added to inventory when this order was received:</p>
          <div class="row g-2">
            {% for item in order.items.all %}
            <div class="col-md-6">
              <div class="d-flex justify-content-between align-items-center p-3 rounded-3" style="background:#f8fafc; border:1px solid #e2e8f0;">
                <div>
                  <div class="fw-semibold small">{{ item.product.name }}</div>
                  <div class="text-muted" style="font-size:0.73rem;">Current stock: {{ item.product.stock_quantity }} units</div>
                </div>
                <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill fw-bold">+{{ item.quantity }}</span>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}

    </div>
  </div>

</div>
{% endblock %}
