{% extends 'admin/base.html' %}

{% block page_title %}Transactions{% endblock %}

{% block admin_content %}
<!-- Filters -->
<div class="admin-toolbar">
    <div class="filter-buttons">
        <a href="{{ url_for('admin.transactions') }}"
            class="btn {{ 'btn-primary' if not tx_type else 'btn-secondary' }}">All</a>
        <a href="{{ url_for('admin.transactions', type='deposit') }}"
            class="btn {{ 'btn-primary' if tx_type == 'deposit' else 'btn-secondary' }}">Deposits</a>
        <a href="{{ url_for('admin.transactions', type='withdrawal') }}"
            class="btn {{ 'btn-primary' if tx_type == 'withdrawal' else 'btn-secondary' }}">Withdrawals</a>
        <a href="{{ url_for('admin.transactions', type='bet') }}"
            class="btn {{ 'btn-primary' if tx_type == 'bet' else 'btn-secondary' }}">Bets</a>
        <a href="{{ url_for('admin.transactions', type='win') }}"
            class="btn {{ 'btn-primary' if tx_type == 'win' else 'btn-secondary' }}">Wins</a>
    </div>
    <div class="toolbar-stats">
        <span>Showing: <strong>{{ transactions.total }}</strong> transactions</span>
    </div>
</div>

<div class="admin-card">
    <div class="card-body">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>User</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Balance After</th>
                    <th>Method</th>
                    <th>Reference</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th>Time</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for tx in transactions.items %}
                <tr>
                    <td>#{{ tx.id }}</td>
                    <td>
                        <a href="{{ url_for('admin.user_detail', user_id=tx.user_id) }}">
                            {{ tx.user.username }}
                        </a>
                    </td>
                    <td>
                        <span class="badge badge-{{ tx.type }}">{{ tx.type|capitalize }}</span>
                    </td>
                    <td class="{{ 'text-success' if tx.type in ['deposit', 'win'] else 'text-danger' }}">
                        {{ "{:,.0f}".format(tx.amount) }} XAF
                    </td>
                    <td>{{ "{:,.0f}".format(tx.balance_after) }} XAF</td>
                    <td>{{ tx.payment_method or '-' }}</td>
                    <td class="code-small">{{ tx.payment_reference or '-' }}</td>
                    <td>{{ tx.description or '-' }}</td>
                    <td>
                        <span class="status status-{{ tx.status }}">{{ tx.status }}</span>
                    </td>
                    <td>{{ tx.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>
                        {% if tx.status == 'pending' %}
                        <div class="action-buttons">
                            <form method="POST" action="{{ url_for('admin.approve_transaction', tx_id=tx.id) }}"
                                style="display: inline;">
                                <button type="submit" class="action-btn approve-btn" title="Approve">
                                    <i class="fas fa-check"></i>
                                </button>
                            </form>
                            <form method="POST" action="{{ url_for('admin.reject_transaction', tx_id=tx.id) }}"
                                style="display: inline;">
                                <button type="submit" class="action-btn reject-btn" title="Reject">
                                    <i class="fas fa-times"></i>
                                </button>
                            </form>
                        </div>
                        {% else %}
                        <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="11" class="text-center">No transactions found</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if transactions.pages > 1 %}
    <div class="card-footer">
        <div class="pagination">
            {% if transactions.has_prev %}
            <a href="{{ url_for('admin.transactions', page=transactions.prev_num, type=tx_type) }}" class="page-link">
                <i class="fas fa-chevron-left"></i>
            </a>
            {% endif %}

            {% for page in transactions.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if page %}
            <a href="{{ url_for('admin.transactions', page=page, type=tx_type) }}"
                class="page-link {{ 'active' if page == transactions.page }}">{{ page }}</a>
            {% else %}
            <span class="page-ellipsis">...</span>
            {% endif %}
            {% endfor %}

            {% if transactions.has_next %}
            <a href="{{ url_for('admin.transactions', page=transactions.next_num, type=tx_type) }}" class="page-link">
                <i class="fas fa-chevron-right"></i>
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<style>
    .action-buttons {
        display: flex;
        gap: 4px;
    }

    .action-btn {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-color);
        background: var(--bg-tertiary);
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        font-size: 0.75rem;
    }

    .action-btn.approve-btn:hover {
        background: rgba(34, 197, 94, 0.15);
        border-color: #22c55e;
        color: #22c55e;
    }

    .action-btn.reject-btn:hover {
        background: rgba(239, 68, 68, 0.15);
        border-color: #ef4444;
        color: #ef4444;
    }

    .toolbar-stats {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }
</style>
{% endblock %}