{% extends "base.html" %}

{% block title %}Customer Wise Report{% endblock %}
{% block page_title %}Customer Wise Report{% endblock %}
{% block page_subtitle %}Search customers and view order totals{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="toolbar-tablet">
    <form method="get" class="toolbar-tablet-filters">
        <div class="filter-field">
            <label for="{{ form.q.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">Search</label>
            {{ form.q }}
        </div>
        <div class="filter-field flex items-end gap-2">
            <button type="submit" class="btn-secondary">Search</button>
            <a href="{% url 'reports:customers' %}" class="btn-secondary">Clear</a>
        </div>
    </form>
</div>

<div class="table-scroll-card card">
    {% if results %}
    <div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>Customer</th><th>Mobile</th><th>Orders</th><th>Total Amount</th><th>Paid</th><th>Balance</th><th>Last Order</th>
            </tr>
        </thead>
        <tbody>
            {% for row in results %}
            <tr>
                <td class="font-medium">
                    <a href="{% url 'customers:detail' row.customer.pk %}" class="table-action-link text-brand-600">{{ row.customer.name }}</a>
                </td>
                <td>{{ row.customer.mobile_number }}</td>
                <td>{{ row.total_orders }}</td>
                <td>₹{{ row.total_amount }}</td>
                <td>₹{{ row.total_paid }}</td>
                <td>₹{{ row.total_balance }}</td>
                <td>{% if row.last_order_date %}{{ row.last_order_date|date:"d M Y" }}{% else %}—{% endif %}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    {% include "partials/empty_state.html" with title="No customers found" message="Try a different search term." %}
    {% endif %}
</div>
{% endblock %}