{% extends "base.html" %}

{% block title %}Payments{% endblock %}
{% block page_title %}Payments{% endblock %}
{% block page_subtitle %}Record and track order payments{% 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">
                {{ form.q.label }}
            </label>
            {{ form.q }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.payment_mode.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
                {{ form.payment_mode.label }}
            </label>
            {{ form.payment_mode }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.payment_status.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
                {{ form.payment_status.label }}
            </label>
            {{ form.payment_status }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.payment_date.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
                {{ form.payment_date.label }}
            </label>
            {{ form.payment_date }}
        </div>
        <div class="filter-field flex items-end gap-2">
            <button type="submit" class="btn-secondary">Filter</button>
            <a href="{% url 'payments:list' %}" class="btn-secondary">Clear</a>
        </div>
    </form>
    {% if can_manage %}
    <div class="toolbar-tablet-actions">
        <a href="{% url 'payments:create' %}" class="btn-primary">New Payment</a>
    </div>
    {% endif %}
</div>

<div class="table-scroll-card card">
    {% if page_obj.object_list %}
    <div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>Payment #</th><th>Order #</th><th>Customer</th><th>Mobile</th>
                <th>Amount</th><th>Mode</th><th>Status</th><th>Date</th>
                <th>Received By</th><th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for payment in page_obj %}
            <tr>
                <td class="font-medium">{{ payment.payment_number }}</td>
                <td>
                    <a href="{% url 'orders:detail' payment.order.pk %}" class="table-action-link text-brand-600">{{ payment.order.order_number }}</a>
                </td>
                <td>{{ payment.order.customer.name }}</td>
                <td>{{ payment.order.customer.mobile_number }}</td>
                <td>₹{{ payment.amount_paid }}</td>
                <td>{{ payment.get_payment_mode_display }}</td>
                <td><span class="badge badge-counter">{{ payment.get_payment_status_display }}</span></td>
                <td>{{ payment.payment_date|date:"d M Y" }}</td>
                <td>{{ payment.received_by.get_full_name|default:payment.received_by.username|default:"—" }}</td>
                <td>
                    <a href="{% url 'payments:detail' payment.pk %}" class="table-action-link text-brand-600">View</a>
                    {% if can_manage %}
                    <a href="{% url 'payments:edit' payment.pk %}" class="table-action-link text-brand-600">Edit</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    {% include "partials/empty_state.html" with title="No payments found" message="Record a payment against an order to get started." action_url="/payments/create/" action_label="New Payment" %}
    {% endif %}
</div>
{% include "partials/pagination.html" %}
{% endblock %}