{% extends "base.html" %}
{% block title %}Customers{% endblock %}
{% block content %}
<div class="space-y-4">
  <div class="flex justify-between items-center">
    <h1 class="text-2xl font-bold">Customers</h1>
    <a href="{% url 'sales:customer_create' %}" class="btn btn-primary btn-sm">New Customer</a>
  </div>
  <form method="get" class="flex gap-2">
    <input type="text" name="q" class="input input-bordered" value="{{ query }}" placeholder="Search customer" />
    <button class="btn btn-primary">Search</button>
  </form>
  <div class="card bg-base-100 border border-base-200">
    <div class="overflow-x-auto">
      <table class="table table-zebra">
        <thead><tr><th>Name</th><th>Phone</th><th>Email</th><th>Balance Due</th><th></th></tr></thead>
        <tbody>
          {% for customer in customers %}
          <tr>
            <td>{{ customer.name }}</td>
            <td>{{ customer.phone|default:"-" }}</td>
            <td>{{ customer.email|default:"-" }}</td>
            <td>{{ customer.balance_due }}</td>
            <td><a href="{% url 'sales:customer_detail' customer.pk %}" class="btn btn-ghost btn-xs">View</a></td>
          </tr>
          {% empty %}
          <tr><td colspan="5" class="text-center opacity-70">No customers.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% include "partials/pagination.html" with page_obj=customers %}
</div>
{% endblock %}