{% extends "base.html" %}

{% block title %}Transaction History - National Medlab Cooperative{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Transaction History</h2>
            <a href="{{ url_for('user_dashboard') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card stats-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">Total Transactions</h6>
                <h3 class="card-title">{{ transactions|length }}</h3>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card stats-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">Total Deposits</h6>
                <h3 class="card-title text-success">₦{{ "%.2f"|format(transactions|selectattr('type', 'equalto', 'deposit')|map(attribute='amount')|sum) }}</h3>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card stats-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">Total Withdrawals</h6>
                <h3 class="card-title text-danger">₦{{ "%.2f"|format(transactions|selectattr('type', 'equalto', 'withdrawal')|map(attribute='amount')|sum) }}</h3>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">All Transactions</h5>
            </div>
            <div class="card-body">
                {% if transactions %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Description</th>
                                    <th>Reference</th>
                                    <th>Status</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for transaction in transactions %}
                                <tr>
                                    <td>{{ transaction.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
                                    <td>
                                        <span class="badge badge-{{ 
                                            'success' if transaction.type == 'deposit' 
                                            else 'danger' if transaction.type == 'withdrawal' 
                                            else 'info' if transaction.type == 'loan_disbursement' 
                                            else 'secondary' 
                                        }}">
                                            {{ transaction.type.replace('_', ' ').title() }}
                                        </span>
                                    </td>
                                    <td>{{ transaction.description or 'N/A' }}</td>
                                    <td><code>{{ transaction.reference or 'N/A' }}</code></td>
                                    <td>
                                        <span class="badge badge-{{ 
                                            'success' if transaction.status == 'completed' 
                                            else 'warning' if transaction.status == 'pending' 
                                            else 'danger' 
                                        }}">
                                            {{ transaction.status.title() }}
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        {% if transaction.type in ['deposit', 'loan_disbursement'] %}
                                            <span class="text-success">+₦{{ "%.2f"|format(transaction.amount) }}</span>
                                        {% else %}
                                            <span class="text-danger">-₦{{ "%.2f"|format(transaction.amount) }}</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-receipt fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No transactions found</h5>
                        <p class="text-muted">You haven't made any transactions yet.</p>
                        <a href="{{ url_for('user_contribute') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>Make Your First Contribution
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Transaction Summary</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center">
                            <h6 class="text-muted">Deposits</h6>
                            <h4 class="text-success">₦{{ "%.2f"|format(transactions|selectattr('type', 'equalto', 'deposit')|map(attribute='amount')|sum) }}</h4>
                            <small class="text-muted">{{ transactions|selectattr('type', 'equalto', 'deposit')|list|length }} transactions</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h6 class="text-muted">Withdrawals</h6>
                            <h4 class="text-danger">₦{{ "%.2f"|format(transactions|selectattr('type', 'equalto', 'withdrawal')|map(attribute='amount')|sum) }}</h4>
                            <small class="text-muted">{{ transactions|selectattr('type', 'equalto', 'withdrawal')|list|length }} transactions</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h6 class="text-muted">Loan Disbursements</h6>
                            <h4 class="text-info">₦{{ "%.2f"|format(transactions|selectattr('type', 'equalto', 'loan_disbursement')|map(attribute='amount')|sum) }}</h4>
                            <small class="text-muted">{{ transactions|selectattr('type', 'equalto', 'loan_disbursement')|list|length }} transactions</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h6 class="text-muted">Net Balance</h6>
                            <h4 class="text-primary">₦{{ "%.2f"|format((transactions|selectattr('type', 'equalto', 'deposit')|map(attribute='amount')|sum + transactions|selectattr('type', 'equalto', 'loan_disbursement')|map(attribute='amount')|sum) - (transactions|selectattr('type', 'equalto', 'withdrawal')|map(attribute='amount')|sum)) }}</h4>
                            <small class="text-muted">All transactions</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}