{% extends "base.html" %}
{% block title %}Customers{% endblock %}
{% block page_heading %}Customer Management{% endblock %}
{% block content %}
<div class="row g-3 mb-4">
  <div class="col-lg-4">
    <div class="card p-3 h-100">
      <h4 class="mb-3">➕ Add Customer</h4>
      <form method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="action" value="add_customer">
        <input class="form-control mb-2" name="customer_name" placeholder="Customer name" required>
        <input class="form-control mb-2" name="phone1" placeholder="Main phone number">
        <input class="form-control mb-2" name="phone2" placeholder="Second phone number">
        <input class="form-control mb-2" name="email" placeholder="Email">
        <div class="row g-2">
          <div class="col-md-6"><input class="form-control mb-2" name="city" placeholder="City"></div>
          <div class="col-md-6"><select class="form-select mb-2" name="customer_type"><option>Retail</option><option>Wholesale</option><option>Service</option><option>Other</option></select></div>
        </div>
        <textarea class="form-control mb-2" name="address" placeholder="Address"></textarea>
        <textarea class="form-control mb-2" name="notes" placeholder="Notes"></textarea>
        <button class="btn btn-success w-100">Save Customer</button>
      </form>
    </div>
  </div>
  <div class="col-lg-8">
    <div class="card p-3 h-100">
      <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <h4 class="mb-0">👥 Customers</h4>
        <form method="get" class="d-flex gap-2">
          <input class="form-control" name="q" value="{{ q }}" placeholder="Search name / phone / city">
          <select class="form-select" name="status"><option {% if status=='Active' %}selected{% endif %}>Active</option><option {% if status=='Inactive' %}selected{% endif %}>Inactive</option><option {% if status=='All' %}selected{% endif %}>All</option></select>
          <button class="btn btn-primary">Search</button>
        </form>
      </div>
      <div class="table-responsive">
        <table class="table table-striped table-hover align-middle">
          <thead><tr><th>Name</th><th>Phone</th><th>Type</th><th>Orders</th><th>Sales</th><th>Outstanding</th><th></th></tr></thead>
          <tbody>
          {% for c in customers %}
            {% set sm = summaries.get(c.id) %}
            <tr>
              <td><strong>{{ c.customer_name }}</strong><br><small class="text-muted">{{ c.city or '-' }}</small></td>
              <td>{{ c.phone1 or '-' }}{% if c.phone2 %}<br><small>{{ c.phone2 }}</small>{% endif %}</td>
              <td><span class="badge bg-info">{{ c.customer_type }}</span></td>
              <td>{{ sm.orders.order_count if sm else 0 }}</td>
              <td>{{ '%.2f'|format(sm.orders.total_sales if sm else 0) }}</td>
              <td class="fw-bold text-danger">{{ '%.2f'|format(sm.orders.outstanding if sm else 0) }}</td>
              <td><a class="btn btn-sm btn-outline-primary" href="{{ url_for('customer_detail', customer_id=c.id) }}">Open</a></td>
            </tr>
          {% else %}
            <tr><td colspan="7" class="text-center py-4">No customers found.</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}