{% extends 'base.html' %}
{% block title %}{{ supplier.name }}{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <h1 class="text-2xl font-bold">{{ supplier.name }}</h1>
  <div class="flex gap-2">
    <a href="{% url 'inventory:supplier_edit' supplier.pk %}" class="btn btn-outline btn-sm">✏ Edit</a>
    <a href="{% url 'inventory:po_create' %}" class="btn btn-primary btn-sm">➕ New Order</a>
  </div>
</div>

<!-- Supplier Info -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
  <div class="card bg-base-100 shadow lg:col-span-2">
    <div class="card-body">
      <h2 class="card-title text-base">Contact Info</h2>
      <div class="grid grid-cols-2 gap-3 text-sm">
        <div>
          <div class="text-base-content/50">Phone</div>
          <div class="font-medium">{{ supplier.phone|default:"—" }}</div>
        </div>
        <div>
          <div class="text-base-content/50">Email</div>
          <div class="font-medium">{{ supplier.email|default:"—" }}</div>
        </div>
        <div class="col-span-2">
          <div class="text-base-content/50">Address</div>
          <div class="font-medium">{{ supplier.address|default:"—" }}</div>
        </div>
        {% if supplier.note %}
        <div class="col-span-2">
          <div class="text-base-content/50">Note</div>
          <div class="font-medium">{{ supplier.note }}</div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="stat bg-base-100 shadow rounded-box">
    <div class="stat-title">Total Purchases</div>
    <div class="stat-value text-2xl text-primary">
      {{ supplier.total_purchases|floatformat:0 }}
    </div>
    <div class="stat-desc">Received orders only</div>
  </div>
</div>

<!-- Purchase Orders -->
<div class="card bg-base-100 shadow">
  <div class="card-body">
    <h2 class="card-title text-base">Purchase Orders</h2>
    <table class="table table-sm">
      <thead>
        <tr>
          <th>Reference</th>
          <th>Total</th>
          <th>Status</th>
          <th>Date</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for po in purchase_orders %}
        <tr>
          <td class="font-mono font-bold">{{ po.reference }}</td>
          <td>{{ po.total|floatformat:0 }}</td>
          <td>
            <span class="badge badge-sm
              {% if po.status == 'received' %}badge-success
              {% elif po.status == 'pending' %}badge-warning
              {% else %}badge-ghost{% endif %}">
              {{ po.get_status_display }}
            </span>
          </td>
          <td>{{ po.date|date:"d M Y" }}</td>
          <td>
            <a href="{% url 'inventory:po_detail' po.pk %}" class="btn btn-ghost btn-xs">View</a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="5" class="text-center text-base-content/40">No orders yet</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}