{% extends "base.html" %}

{% block title %}Payments Report{% endblock %}
{% block page_title %}Payments Report{% endblock %}
{% block page_subtitle %}Filter and export payment data{% endblock %}

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

<div class="toolbar-tablet">
    <form method="get" class="toolbar-tablet-filters">
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.date_from.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">From Date</label>
            {{ form.date_from }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.date_to.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">To Date</label>
            {{ form.date_to }}
        </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">Payment Mode</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">Payment Status</label>
            {{ form.payment_status }}
        </div>
        <div class="filter-field flex items-end gap-2">
            <button type="submit" class="btn-secondary">Filter</button>
            <a href="{% url 'reports:payments' %}" class="btn-secondary">Clear</a>
        </div>
    </form>
    <div class="toolbar-tablet-actions">
        <a href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}export=csv" class="btn-secondary">Export CSV</a>
        <a href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}export=xlsx" class="btn-secondary">Export Excel</a>
    </div>
</div>

<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
    <div class="card text-center">
        <p class="text-sm text-slate-500">Total Collected</p>
        <p class="text-xl font-bold text-brand-600">₹{{ summary.total_payments }}</p>
    </div>
    <div class="card text-center">
        <p class="text-sm text-slate-500">Payment Count</p>
        <p class="text-xl font-bold">{{ summary.count }}</p>
    </div>
    <div class="card text-center">
        <p class="text-sm text-slate-500">Cash</p>
        <p class="text-xl font-bold">₹{{ summary.by_mode.cash }}</p>
    </div>
    <div class="card text-center">
        <p class="text-sm text-slate-500">UPI</p>
        <p class="text-xl font-bold">₹{{ summary.by_mode.upi }}</p>
    </div>
    <div class="card text-center">
        <p class="text-sm text-slate-500">Card</p>
        <p class="text-xl font-bold">₹{{ summary.by_mode.card }}</p>
    </div>
</div>

<div class="table-scroll-card card">
    {% if payments %}
    <div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>Payment #</th><th>Order #</th><th>Customer</th><th>Amount</th><th>Mode</th><th>Date</th>
            </tr>
        </thead>
        <tbody>
            {% for payment in payments %}
            <tr>
                <td class="font-medium">
                    <a href="{% url 'payments:detail' payment.pk %}" class="table-action-link text-brand-600">{{ payment.payment_number }}</a>
                </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.amount_paid }}</td>
                <td>{{ payment.get_payment_mode_display }}</td>
                <td>{{ payment.payment_date|date:"d M Y" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    {% include "partials/empty_state.html" with title="No payments match filters" %}
    {% endif %}
</div>
{% endblock %}