{% extends 'base.html' %}
{% block content %}
  <h2>Customer Accounts</h2>
  
  <!-- Live Search -->
  <div class="card" style="margin-top:8px; margin-bottom:8px;">
    <input type="text" id="customer-account-search" placeholder="🔍 Search customers by name, phone, balance, status..." 
           style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
  </div>
  
  <div class="card" style="margin-top:8px">
    <table class="table" id="customer-accounts-table">
      <thead>
        <tr>
          <th>Customer</th>
          <th>Phone</th>
          <th>Balance</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for c in customers %}
          {% set customer_balance = balances[c.id] if balances and c.id in balances else 0 %}
          <tr>
            <td>{{ c.name }}</td>
            <td>{{ c.phone or '-' }}</td>
            <td style="font-weight: 600; color: {% if customer_balance > 0 %}red{% else %}green{% endif %};">
              {{ customer_balance|currency }}
            </td>
            <td>
              {% if customer_balance > 0 %}
                <span style="color: red; font-weight: 500;">Owes {{ customer_balance|currency }}</span>
              {% elif customer_balance < 0 %}
                <span style="color: green; font-weight: 500;">Credit {{ (customer_balance * -1)|currency }}</span>
              {% else %}
                <span style="color: #666;">Paid Up</span>
              {% endif %}
            </td>
            <td class="actions">
              <a class="btn-outline" href="{{ url_for('account_ledger', customer_id=c.id) }}">Ledger</a>
              <a class="btn-primary" href="{{ url_for('account_payment', customer_id=c.id) }}">Record Payment</a>
            </td>
          </tr>
        {% else %}
          <tr><td colspan="5" class="muted">No customers.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      initLiveSearch('customer-account-search', 'customer-accounts-table');
    });
  </script>
{% endblock %}