{% extends "base.html" %}

{% block content %}
<div class="container mt-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>
            Contributions (Total: KSh {{ total_amount|floatformat:2 }})
        </h1>
        <a href="{% url 'contribution_create' %}" class="btn btn-primary">
            Record Contribution
        </a>
    </div>

    <!-- Date Filter -->
    <form method="get" class="mb-4">
        <div class="row g-3">
            <div class="col-md-4">
                <label>Start Date</label>
                <input type="date" name="start_date" class="form-control" value="{{ start_date }}">
            </div>
            <div class="col-md-4">
                <label>End Date</label>
                <input type="date" name="end_date" class="form-control" value="{{ end_date }}">
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button type="submit" class="btn btn-outline-primary me-2">Filter</button>
                <a href="{% url 'contribution_list' %}" class="btn btn-outline-secondary">Clear</a>
            </div>
        </div>
    </form>

    <!-- Contributions Table -->
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Member</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Method</th>
                    <th>Reference</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for contribution in page_obj %}
                <tr>
                    <td>{{ contribution.date|date:"M d, Y" }}</td>
                    <td>{{ contribution.member.full_name }}</td>
                    <td>{{ contribution.contribution_type }}</td>
                    <td><strong>KSh {{ contribution.amount|floatformat:2 }}</strong></td>
                    <td>{{ contribution.payment_method }}</td>
                    <td>{{ contribution.reference_number|default:"—" }}</td>
                    <td>
                        <a href="{% url 'contribution_detail' contribution.pk %}" class="btn btn-sm btn-outline-primary">View</a>
                        <a href="{% url 'member_contributions' contribution.member.member_id %}" class="btn btn-sm btn-outline-info">Member History</a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="text-center">No contributions found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
    <nav>
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                </li>
            {% endif %}

            <li class="page-item active">
                <span class="page-link">{{ page_obj.number }}</span>
            </li>

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}

    <a href="{% url 'dashboard' %}" class="btn btn-secondary my-3">
        Return to Dashboard
    </a>

</div>
{% endblock %}