{% extends "base.html" %}
{% block page_heading %}Supplier Management{% endblock %}
{% block content %}
<div class="d-flex justify-content-between mb-3">
  <p class="text-muted mb-0">Manage suppliers and purchase records.</p>
  <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addSupplierModal">
    <i class="bi bi-plus-lg"></i> Add Supplier
  </button>
</div>

<div class="card-panel">
  <table class="data-table">
    <thead><tr><th>Supplier</th><th>Phone</th><th>Address</th><th>Purchases</th><th>Total</th><th>Actions</th></tr></thead>
    <tbody>
      {% for s in suppliers %}
      <tr>
        <td>{{ s.supplier_name }}</td>
        <td>{{ s.phone or '—' }}</td>
        <td>{{ s.address or '—' }}</td>
        <td>{{ s.purchase_count }}</td>
        <td>{{ s.total_purchases|currency }}</td>
        <td>
          <a href="{{ url_for('supplier_purchases', sid=s.id) }}" class="btn btn-sm btn-outline-info">Records</a>
          <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#purchaseModal" data-supplier="{{ s.id }}" data-name="{{ s.supplier_name }}">Add Purchase</button>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="text-center text-muted">No suppliers yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="modal fade" id="addSupplierModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="POST" action="{{ url_for('add_supplier') }}" class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Add Supplier</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <div class="mb-2"><label class="form-label">Supplier Name</label><input name="supplier_name" class="form-control" required></div>
        <div class="mb-2"><label class="form-label">Phone</label><input name="phone" class="form-control"></div>
        <div class="mb-2"><label class="form-label">Address</label><textarea name="address" class="form-control" rows="2"></textarea></div>
      </div>
      <div class="modal-footer"><button type="submit" class="btn btn-primary">Add Supplier</button></div>
    </form>
  </div>
</div>

<div class="modal fade" id="purchaseModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="POST" action="{{ url_for('add_purchase') }}" class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Record Purchase — <span id="purchaseSupplierName"></span></h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <input type="hidden" name="supplier_id" id="purchaseSupplierId">
        <div class="mb-2"><label class="form-label">Product</label>
          <select name="product_id" class="form-select" required>
            {% for p in products %}<option value="{{ p.id }}">{{ p.product_name }}</option>{% endfor %}
          </select>
        </div>
        <div class="row">
          <div class="col-6 mb-2"><label class="form-label">Quantity</label><input name="quantity" type="number" class="form-control" min="1" required></div>
          <div class="col-6 mb-2"><label class="form-label">Unit Price</label><input name="unit_price" type="number" step="0.01" class="form-control" required></div>
        </div>
        <div class="mb-2"><label class="form-label">Purchase Date</label><input name="purchase_date" type="date" class="form-control"></div>
        <div class="mb-2"><label class="form-label">Notes</label><input name="notes" class="form-control"></div>
      </div>
      <div class="modal-footer"><button type="submit" class="btn btn-primary">Save Purchase</button></div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('purchaseModal')?.addEventListener('show.bs.modal', function(e) {
  const btn = e.relatedTarget;
  document.getElementById('purchaseSupplierId').value = btn.dataset.supplier;
  document.getElementById('purchaseSupplierName').textContent = btn.dataset.name;
});
</script>
{% endblock %}