{% extends 'base.html' %}
{% block title %}Customers{% endblock %}
{% block content %}
<div class="page-header">
  <div class="page-title">Customers <small>Manage your customer list</small></div>
</div>

{% if error %}
<div class="alert alert-danger mb-3">{{ error }}</div>
{% endif %}

<div class="row g-4">
  <div class="col-lg-5">
    <div class="card">
      <div class="card-header"><span class="card-title">Add New Customer</span></div>
      <div class="card-body">
        {% if can_edit() %}
        <form method="post">
          <div class="form-group mb-3">
            <label>Customer Name *</label>
            <input type="text" name="name" required placeholder="e.g. Hayleys PLC">
          </div>
          <div class="form-group mb-3">
            <label>Contact / Notes</label>
            <input type="text" name="contact" placeholder="Phone, email, or notes">
          </div>
          <button type="submit" class="btn btn-primary btn-sm">Add Customer</button>
        </form>
        {% else %}
        <p class="text-muted">You don't have permission to add customers.</p>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-lg-7">
    <div class="card">
      <div class="card-header">
        <span class="card-title">Customer List</span>
        <span class="badge badge-open">{{ customers|length }}</span>
      </div>
      <div class="table-wrap">
        <table>
          <thead><tr>
            <th>Name</th><th>Contact</th><th class="text-right">Contracts</th><th class="no-print"></th>
          </tr></thead>
          <tbody>
          {% for c in customers %}
            <tr>
              <td style="font-weight:500">{{ c.name }}</td>
              <td class="text-muted text-sm">{{ c.contact or '–' }}</td>
              <td class="text-right"><span class="badge badge-open">{{ c.contract_count }}</span></td>
              <td class="no-print">
                <div class="d-flex gap-1">
                  <button class="btn btn-outline-secondary btn-sm btn-edit-customer"
                    data-cid="{{ c.id }}"
                    data-name="{{ c.name }}"
                    data-contact="{{ c.contact or '' }}">Edit</button>
                  {% if c.contract_count == 0 %}
                  <form method="post" onsubmit="return confirm('Delete customer?')">
                    <input type="hidden" name="id" value="{{ c.id }}">
                    <input type="hidden" name="action" value="delete">
                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                  </form>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% else %}
            <tr><td colspan="4" class="empty-state">No customers yet</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Edit Modal (Bootstrap) -->
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Customer</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post">
        <div class="modal-body">
          <input type="hidden" name="id" id="editId">
          <input type="hidden" name="action" value="edit">
          <div class="form-group mb-3">
            <label>Name *</label>
            <input type="text" name="name" id="editName" required>
          </div>
          <div class="form-group mb-3">
            <label>Contact</label>
            <input type="text" name="contact" id="editContact">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script>
document.querySelectorAll('.btn-edit-customer').forEach(function(btn) {
  btn.addEventListener('click', function() {
    document.getElementById('editId').value      = this.dataset.cid;
    document.getElementById('editName').value    = this.dataset.name;
    document.getElementById('editContact').value = this.dataset.contact;
    new bootstrap.Modal(document.getElementById('editModal')).show();
  });
});
</script>
{% endblock %}