{% extends "base.html" %}
{% block title %}Payments Log{% endblock %}

{% block content %}
<h2>Payments Log</h2>

<form method="GET" action="{{ url_for('payments_log') }}" class="form-inline mb-3">
    <div class="form-group mr-2">
        <label for="customer_name_search" class="sr-only">Search Customer Name</label>
        <input type="text" class="form-control" id="customer_name_search" name="customer_name" placeholder="Search by Customer Name" value="{{ search_customer_name if search_customer_name else '' }}">
    </div>
    <button type="submit" class="btn btn-primary">Search</button>
    {% if search_customer_name %}
        <a href="{{ url_for('payments_log') }}" class="btn btn-secondary ml-2">Clear Search</a>
    {% endif %}
</form>

{% if payments.items %}
<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Customer Name</th>
                <th>STB No.</th>
                <th>Payment Date</th>
                <th>Amount Paid</th>
                <th>Method</th>
                <th>Billing Period</th>
                <th>Txn Ref.</th>
                <th>Received By</th>
            </tr>
        </thead>
        <tbody>
            {% for payment in payments.items %}
            <tr>
                <td>{{ payment.customer.name }}</td>
                <td>{{ payment.customer.set_top_box_number }}</td>
                <td>{{ payment.payment_date.strftime('%d-%b-%Y') }}</td>
                <td>₹ {{ "%.2f"|format(payment.amount_paid) }}</td>
                <td>{{ payment.payment_method }}</td>
                <td>{{ payment.billing_period_display }}</td>
                <td>{{ payment.transaction_reference if payment.transaction_reference else '-' }}</td>
                <td>{{ payment.received_by if payment.received_by else '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
        {% if payments.has_prev %}
            <li class="page-item"><a class="page-link" href="{{ url_for('payments_log', page=payments.prev_num, customer_name=search_customer_name) }}">Previous</a></li>
        {% else %}
            <li class="page-item disabled"><span class="page-link">Previous</span></li>
        {% endif %}

        {% for page_num in payments.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
            {% if page_num %}
                {% if payments.page == page_num %}
                    <li class="page-item active"><span class="page-link">{{ page_num }}</span></li>
                {% else %}
                    <li class="page-item"><a class="page-link" href="{{ url_for('payments_log', page=page_num, customer_name=search_customer_name) }}">{{ page_num }}</a></li>
                {% endif %}
            {% else %}
                <li class="page-item disabled"><span class="page-link">...</span></li>
            {% endif %}
        {% endfor %}

        {% if payments.has_next %}
            <li class="page-item"><a class="page-link" href="{{ url_for('payments_log', page=payments.next_num, customer_name=search_customer_name) }}">Next</a></li>
        {% else %}
            <li class="page-item disabled"><span class="page-link">Next</span></li>
        {% endif %}
    </ul>
</nav>

{% else %}
<p>No payments found. {% if search_customer_name %} Try a different search. {% endif %}</p>
{% endif %}
{% endblock %}