{% extends "partials/dashboard-base.html" %}
{% load static %}
{% load humanize %}

{% block content %}
<section class="dashboard-section body-collapse pay step step-2 step-3 receive-3">
    <div class="overlay pt-120">
        <div class="container-fluid">
            <div class="main-content">
                <div class="head-area d-flex align-items-center justify-content-between">
                    <h4>Transaction History</h4>
                    <div class="icon-area">
                        <!-- Optional: Add a support icon or other elements if needed -->
                    </div>
                </div>

                <!-- Filter Form -->
                <div class="filter-area mb-4">
                    <form method="get" class="row g-3">
                        <div class="col-md-3">
                            <label for="transaction_type" class="form-label">Transaction Type</label>
                            <select name="transaction_type" id="transaction_type" class="form-select">
                                <option value="">All Types</option>
                                {% for type, display in filter_form.transaction_type.field.choices %}
                                    <option value="{{ type }}" {% if filter_form.transaction_type.value == type %}selected{% endif %}>
                                        {{ display }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="status" class="form-label">Status</label>
                            <select name="status" id="status" class="form-select">
                                <option value="">All Statuses</option>
                                {% for status, display in filter_form.status.field.choices %}
                                    <option value="{{ status }}" {% if filter_form.status.value == status %}selected{% endif %}>
                                        {{ display }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="date_range" class="form-label">Date Range</label>
                            <input type="text" name="date_range" id="date_range" class="form-control" 
                                   value="{{ filter_form.date_range.value|default_if_none:'' }}" 
                                   placeholder="YYYY-MM-DD to YYYY-MM-DD">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">Filter</button>
                        </div>
                    </form>
                </div>

                <!-- Transaction Table -->
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Transfer Type</th>
                                <th>Debit/Credit</th>
                                <th>Reference</th>
                                <th>Beneficiary</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for transaction in transactions %}
                            <tr>
                                <td>{{ transaction.transaction_type|capfirst }}</td>
                                <td>{{ transaction.transfer.transfer_type|capfirst }}</td>
                                <td>{{ transaction.debit_credit|capfirst }}</td>
                                <td>{{ transaction.reference }}</td>
                                <td>
                                    {% if transaction.transfer %}
                                        {{ transaction.transfer.beneficiary_name }} ({{ transaction.transfer.account_number }})
                                    {% else %}
                                        N/A
                                    {% endif %}
                                </td>
                                <td>${{ transaction.amount|floatformat:2|intcomma }}</td>
                                <td>
                                    <span class="badge 
                                        {% if transaction.status == 'completed' %}bg-success
                                        {% elif transaction.status == 'pending' %}bg-warning
                                        {% elif transaction.status == 'declined' %}bg-danger
                                        {% else %}bg-secondary{% endif %}">
                                        {{ transaction.status|capfirst }}
                                    </span>
                                </td>
                                <td>{{ transaction.created_at|date:"Y-m-d H:i:s" }}</td>
                                <td>
                                    {% if transaction.transfer %}
                                        <a href="{% url 'account:transaction_receipt' transaction.transfer.id %}" class="btn btn-sm btn-outline-primary">
                                            View Receipt
                                        </a>
                                    {% else %}
                                        <span class="text-muted">No Receipt</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="9" class="text-center">No transactions found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if transactions.has_other_pages %}
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center mt-4">
                        {% if transactions.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ transactions.previous_page_number }}{% if request.GET.transaction_type %}&transaction_type={{ request.GET.transaction_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_range %}&date_range={{ request.GET.date_range }}{% endif %}" aria-label="Previous">
                                    <span aria-hidden="true">«</span>
                                </a>
                            </li>
                        {% endif %}

                        {% for num in transactions.paginator.page_range %}
                            <li class="page-item {% if transactions.number == num %}active{% endif %}">
                                <a class="page-link" href="?page={{ num }}{% if request.GET.transaction_type %}&transaction_type={{ request.GET.transaction_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_range %}&date_range={{ request.GET.date_range }}{% endif %}">{{ num }}</a>
                            </li>
                        {% endfor %}

                        {% if transactions.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ transactions.next_page_number }}{% if request.GET.transaction_type %}&transaction_type={{ request.GET.transaction_type }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_range %}&date_range={{ request.GET.date_range }}{% endif %}" aria-label="Next">
                                    <span aria-hidden="true">»</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}

                <!-- Remaining Daily Limit -->
                {% if remaining_limit is not None %}
                <div class="alert alert-info mt-4 text-center">
                    <strong>Remaining Daily Limit:</strong> ${{ remaining_limit|floatformat:2|intcomma }}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<style>
    /* Adjust container margins for responsiveness */
    @media screen and (max-width: 480px) {
        .dashboard-section {
            padding-top: 30% !important;
        }
    }
    @media screen and (min-width: 480px) {
        .dashboard-section {
            padding-top: 10% !important;
        }
    }

    /* Style for the table */
    .table th, .table td {
        vertical-align: middle;
    }
    .table-hover tbody tr:hover {
        background-color: #f8f9fa;
    }
    .badge {
        font-size: 0.9rem;
        padding: 0.5em 1em;
    }
</style>

{% endblock %}