{% extends 'agent/_layout.html.twig' %}

{% block title %}Transactions{% endblock %}

{% block agent_content %}

    <h1 class="fw-bold mb-1 text-white" data-testid="agent-tx-title">Transactions</h1>
    <p class="mb-4" style="font-size:13px; color:#afafaf;">
        {{ total }} record{{ total != 1 ? 's' : '' }}{% if search %} matching "{{ search }}"{% endif %}.
    </p>

    <form method="GET" action="{{ path('app_agent_transactions') }}" class="d-flex gap-2 mb-3" data-testid="agent-tx-search-form">
        <input type="search" name="search" value="{{ search }}"
               placeholder="Search by type, status, or notes…"
               class="form-control"
               style="max-width:320px; background:#1a1a1a; border:1px solid #2a2a2a; color:#ffffff; border-radius:8px; padding:8px 12px; font-size:13px;"
               data-testid="agent-tx-search-input">
        <button type="submit"
                style="padding:8px 18px; border-radius:8px; background:#ffffff; color:#000000; font-size:13px; font-weight:600; border:none; cursor:pointer; white-space:nowrap;"
                data-testid="agent-tx-search-btn">
            Search
        </button>
        {% if search %}
            <a href="{{ path('app_agent_transactions') }}"
               style="padding:8px 14px; border-radius:8px; border:1px solid #2a2a2a; color:#afafaf; font-size:13px; text-decoration:none; display:inline-flex; align-items:center;"
               data-testid="agent-tx-search-clear">
                Clear
            </a>
        {% endif %}
    </form>

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="agent-tx-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Date</th>
                        <th class="th-white">Type</th>
                        <th class="th-white">From / Player</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">Status / Notes</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tx in transactions %}
                    <tr class="table-row" data-testid="agent-tx-row">
                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {{ tx.date|date('M d, Y H:i') }}
                        </td>
                        <td class="td-cell">
                            {% if tx.type == 'deposit' %}
                                <span class="badge-status badge-status--approved">Deposit</span>
                            {% elseif tx.type == 'withdrawal' %}
                                <span class="badge-status badge-status--pending">Withdrawal</span>
                            {% elseif tx.type == 'commission' %}
                                <span class="badge-status" style="background:#dbeafe; color:#1d4ed8;">Commission</span>
                            {% elseif tx.type == 'adjustment' %}
                                <span class="badge-status badge-status--neutral">Adjustment</span>
                            {% elseif tx.type == 'bet' %}
                                <span class="badge-status badge-status--rejected">Bet</span>
                            {% elseif tx.type == 'win' %}
                                <span class="badge-status badge-status--won">Win</span>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--muted">
                            {% if tx.player_name %}
                                <span class="fw-semibold" style="color:#000000;">{{ tx.player_name }}</span>
                                {% if tx.mobile_number %}
                                    <br><span class="font-mono-sm">{{ tx.mobile_number }}</span>
                                {% endif %}
                                {% if tx.type == 'commission' and tx.race_id %}
                                    {% if tx.pair starts with 'HL-' %}
                                        <br><span class="font-mono-sm" style="color:#afafaf;">Round #{{ tx.race_id }} &middot; {{ tx.pair == 'HL-card1' ? 'Card 1' : 'Card 2' }}</span>
                                    {% elseif tx.pair starts with 'CG-' %}
                                        <br><span class="font-mono-sm" style="color:#afafaf;">Color: {{ tx.pair|slice(3) }}</span>
                                    {% elseif tx.pair starts with 'PK-' %}
                                        <br><span class="font-mono-sm" style="color:#afafaf;">Pachinko: {{ tx.pair|slice(3) }}</span>
                                    {% elseif tx.pair starts with 'H2H-' %}
                                        <br><span class="font-mono-sm" style="color:#afafaf;">Head2Head: {{ tx.pair|slice(4) }}</span>
                                    {% elseif tx.pair starts with 'MN-' %}
                                        <br><span class="font-mono-sm" style="color:#afafaf;">Mines: {{ tx.pair|slice(3) }}</span>
                                    {% elseif tx.pair starts with 'FK-' %}
                                        <br><span class="font-mono-sm" style="color:#afafaf;">Fruit King: {{ tx.pair|slice(3) }}</span>
                                    {% elseif tx.pair starts with 'EZ-' %}
                                        <br><span class="font-mono-sm" style="color:#afafaf;">EZDOS: Draw #{{ tx.race_id }} &middot; {{ tx.pair|slice(3) }}</span>
                                    {% elseif tx.pair starts with 'LR-' %}
                                        <br><span class="font-mono-sm" style="color:#afafaf;">Live Racing: {{ tx.pair|slice(3)|replace({'_': ' '})|title }}</span>
                                    {% else %}
                                        <br><span class="font-mono-sm" style="color:#afafaf;">Race #{{ tx.race_id }}{% if tx.pair %} &middot; {{ tx.pair }}{% endif %}</span>
                                    {% endif %}
                                {% endif %}
                            {% else %}
                                —
                            {% endif %}
                        </td>
                        <td class="td-cell fw-semibold">
                            ₱{{ tx.amount|number_format(2) }}
                        </td>
                        <td class="td-cell td-cell--muted">
                            {% if tx.status is not null and tx.status is not empty %}
                                <span class="badge-status badge-status--{{ tx.status in ['approved', 'won'] ? 'approved' : (tx.status in ['rejected', 'lost'] ? 'rejected' : 'pending') }}">
                                    {{ tx.status|capitalize }}
                                </span>
                            {% endif %}
                            {% if tx.notes is not null and tx.notes is not empty %}
                                <span style="font-size:12px;">{{ tx.notes }}</span>
                            {% endif %}
                            {% if (tx.status is null or tx.status is empty) and (tx.notes is null or tx.notes is empty) %}
                                —
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="td-empty">No transactions found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="agent-tx-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_agent_transactions', {page: currentPage - 1, search: search}) }}" class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_agent_transactions', {page: currentPage + 1, search: search}) }}" class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}