{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width:950px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-building me-2"></i> Asset Vendors</h4>
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#vendorModal"
            onclick="openVendorModal()">
      <i class="bi bi-plus-circle me-1"></i> New Vendor
    </button>
  </div>

  <form class="card shadow-sm border-0 mb-3">
    <div class="card-body py-2">
      <div class="row g-2">
        <div class="col-md-6">
          <label class="form-label mb-0">Search</label>
          <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm"
                 placeholder="Vendor name">
        </div>
        <div class="col-md-2 align-self-end">
          <button class="btn btn-sm btn-outline-primary">
            <i class="bi bi-search"></i> Filter
          </button>
        </div>
      </div>
    </div>
  </form>

  <div class="card shadow-sm border-0">
    <div class="card-body p-0">
      <table class="table table-hover table-sm align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th style="width:60px;">#</th>
            <th>Name</th>
            <th>Contact Person</th>
            <th>Phone</th>
            <th>Email</th>
            <th style="width:140px;" class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% if vendors %}
            {% for v in vendors %}
            <tr>
              <td>{{ loop.index }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.contact_person or '-' }}</td>
              <td>{{ v.phone or '-' }}</td>
              <td>{{ v.email or '-' }}</td>
              <td class="text-end">
                <button class="btn btn-sm btn-outline-secondary me-1"
                        onclick="openVendorModal({{ v.id }}, '{{ v.name|escape }}',
                                                 '{{ v.contact_person|default('')|escape }}',
                                                 '{{ v.phone|default('')|escape }}',
                                                 '{{ v.email|default('')|escape }}',
                                                 `{{ (v.address or '')|escape }}`)">
                  <i class="bi bi-pencil"></i>
                </button>
                <form method="post" action="{{ url_for('assets.delete_vendor', vendor_id=v.id) }}"
                      class="d-inline" onsubmit="return confirm('Delete this vendor?');">
                  <button class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-trash"></i>
                  </button>
                </form>
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="6" class="text-center text-muted py-3">
                No vendors yet.
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="vendorModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="post" action="{{ url_for('assets.vendors') }}">
        <input type="hidden" name="mode" id="vendor_mode" value="create">
        <input type="hidden" name="vendor_id" id="vendor_id">

        <div class="modal-header">
          <h5 class="modal-title" id="vendorModalLabel">New Vendor</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Name *</label>
              <input type="text" name="name" id="vendor_name" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Contact Person</label>
              <input type="text" name="contact_person" id="vendor_contact" class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">Phone</label>
              <input type="text" name="phone" id="vendor_phone" class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">Email</label>
              <input type="email" name="email" id="vendor_email" class="form-control">
            </div>
            <div class="col-md-12">
              <label class="form-label">Address</label>
              <textarea name="address" id="vendor_address" class="form-control" rows="2"></textarea>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-primary">
            <i class="bi bi-save me-1"></i> Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function openVendorModal(id, name, contact, phone, email, address) {
  document.getElementById("vendor_mode").value = id ? "edit" : "create";
  document.getElementById("vendor_id").value = id || "";
  document.getElementById("vendor_name").value = name || "";
  document.getElementById("vendor_contact").value = contact || "";
  document.getElementById("vendor_phone").value = phone || "";
  document.getElementById("vendor_email").value = email || "";
  document.getElementById("vendor_address").value = address || "";
  document.getElementById("vendorModalLabel").innerText = id ? "Edit Vendor" : "New Vendor";
}
</script>
{% endblock %}