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

{% block title %}Withdrawals — WFBO{% endblock %}
{% block wfbo_title %}Withdrawals{% endblock %}

{% block wfbo_content %}

    {# Flash messages #}
    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">{{ flash }}</div>
    {% endfor %}

    {# ── Search ── #}
    <form method="get" action="{{ path('app_wfbo_withdrawals') }}" class="d-flex gap-2 mb-4"
          data-testid="withdrawal-search-form">
        {% if currentStatus %}<input type="hidden" name="status" value="{{ currentStatus }}">{% endif %}
        <input type="text" name="search" value="{{ search }}"
               placeholder="Search by name or account…"
               class="form-control" style="max-width: 300px; background:#fff; color:#111; border:1px solid #d1d5db;"
               data-testid="input-withdrawal-search">
        <button type="submit" class="btn btn-sm btn-secondary" data-testid="btn-withdrawal-search">Search</button>
        {% if search %}
            <a href="{{ path('app_wfbo_withdrawals', currentStatus ? {status: currentStatus} : {}) }}"
               class="btn btn-sm btn-outline-secondary" data-testid="btn-withdrawal-search-clear">Clear</a>
        {% endif %}
    </form>

    {# ── Status filter tabs ── #}
    <div class="d-flex gap-2 mb-4 flex-wrap" data-testid="withdrawal-status-filters">
        {% set filters = [
            {label: 'All',      value: null},
            {label: 'Pending',  value: 'pending'},
            {label: 'Approved', value: 'approved'},
            {label: 'Rejected', value: 'rejected'},
        ] %}
        {% for f in filters %}
            <a href="{{ path('app_wfbo_withdrawals', {status: f.value, search: search}|filter(v => v is not null and v != '')) }}"
               class="filter-pill {% if currentStatus == f.value %}is-active{% endif %}"
               data-testid="filter-{{ f.label|lower }}">
                {{ f.label }}
                {% if f.value == 'pending' %}
                    <span class="filter-count-badge {% if currentStatus == 'pending' %}filter-count-badge--active{% else %}filter-count-badge--default{% endif %}">
                        {{ pendingCount }}
                    </span>
                {% endif %}
            </a>
        {% endfor %}
    </div>

    {# ── Total count + refresh ── #}
    <div class="d-flex align-items-center justify-content-between mb-3">
        <p class="pagination-info mb-0">
            {{ total }} withdrawal{{ total != 1 ? 's' : '' }}{{ currentStatus ? ' (' ~ currentStatus ~ ')' : '' }}
        </p>
        <a href="{{ path('app_wfbo_withdrawals', {page: currentPage, status: currentStatus, search: search}|filter(v => v is not null and v != '')) }}"
           class="btn btn-sm btn-outline-secondary" data-testid="btn-withdrawals-refresh">
            ↻ Refresh
        </a>
    </div>

    {# ── Table ── #}
    <div class="card table-card" data-testid="withdrawals-table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="withdrawals-table">
                <thead>
                    <tr class="thead-row--strong">
                        <th class="th-white">#</th>
                        <th class="th-white">User</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">Submitted</th>
                        <th class="th-white">Bank Details</th>
                        <th class="th-white">Notes</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for withdrawal in withdrawals %}
                    <tr class="table-row" data-testid="withdrawal-row-{{ withdrawal.id }}">

                        <td class="td-cell td-cell--id">{{ withdrawal.id }}</td>

                        <td class="td-cell">
                            <p class="fw-medium mb-0 d-flex align-items-center gap-2 flex-wrap">
                                {{ withdrawal.user.firstName }} {{ withdrawal.user.lastName }}
                                {% if 'ROLE_MASTER_AGENT' in withdrawal.user.roles %}
                                    <span class="badge-agent-inline">Agent</span>
                                {% endif %}
                            </p>
                            <p class="text-muted mb-0">{{ withdrawal.user.userIdentifier }}</p>
                        </td>

                        <td class="td-cell td-cell--nowrap fw-bold">
                            ₱{{ withdrawal.amount|number_format(2) }}
                        </td>

                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {{ withdrawal.createdAt|date('M d, Y H:i') }}
                        </td>

                        <td class="td-cell">
                            <p class="fw-semibold mb-0" style="font-size: 13px;">{{ withdrawal.bankName }}</p>
                            <p class="text-muted mb-0" style="font-size: 12px;">{{ withdrawal.bankAccountName }}</p>
                            <p class="font-mono-sm mb-0" style="color: #374151;">{{ withdrawal.bankAccountNumber }}</p>
                        </td>

                        <td class="td-cell td-cell--dark" style="max-width: 180px;">
                            {{ withdrawal.notes ?? '—' }}
                        </td>

                        <td class="td-cell">
                            {% if withdrawal.status == 'pending' %}
                                <span class="badge-status badge-status--pending"
                                      data-testid="badge-withdrawal-{{ withdrawal.id }}">Pending</span>
                            {% elseif withdrawal.status == 'approved' %}
                                <span class="badge-status badge-status--approved"
                                      data-testid="badge-withdrawal-{{ withdrawal.id }}">Approved</span>
                                {% if withdrawal.reviewNote %}
                                    <p class="amount-sub text-muted">{{ withdrawal.reviewNote }}</p>
                                {% endif %}
                            {% else %}
                                <span class="badge-status badge-status--rejected"
                                      data-testid="badge-withdrawal-{{ withdrawal.id }}">Rejected</span>
                                {% if withdrawal.reviewNote %}
                                    <p class="amount-sub text-muted">{{ withdrawal.reviewNote }}</p>
                                {% endif %}
                            {% endif %}
                        </td>

                        <td class="td-cell">
                            {% if withdrawal.status == 'pending' %}
                                <div style="display: flex; flex-direction: column; gap: 8px; min-width: 200px;"
                                     data-controller="review-action">

                                    {# Review note #}
                                    <input type="text"
                                           placeholder="Review note (optional)"
                                           class="table-input"
                                           data-review-action-target="noteInput"
                                           data-testid="input-review-note-{{ withdrawal.id }}">

                                    <div class="d-flex gap-2">
                                        {# Approve #}
                                        <form method="post"
                                              enctype="multipart/form-data"
                                              action="{{ path('app_wfbo_withdrawal_action', {id: withdrawal.id, action: 'approve'}) }}"
                                              data-testid="form-approve-{{ withdrawal.id }}"
                                              data-turbo="false"
                                              data-no-loading
                                              data-action="submit->review-action#submitApprove">
                                            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_withdrawal_action_' ~ withdrawal.id) }}">
                                            <input type="hidden" name="reviewNote">
                                            <input type="file" name="receipt" accept="image/*,application/pdf"
                                                   class="table-input" style="font-size: 11px; padding: 4px;"
                                                   data-testid="input-receipt-{{ withdrawal.id }}">
                                            <button type="submit" class="btn btn-approve"
                                                    data-testid="btn-approve-{{ withdrawal.id }}">
                                                Approve
                                            </button>
                                        </form>

                                        {# Reject #}
                                        <form method="post"
                                              action="{{ path('app_wfbo_withdrawal_action', {id: withdrawal.id, action: 'reject'}) }}"
                                              data-testid="form-reject-{{ withdrawal.id }}"
                                              data-turbo="false"
                                              data-no-loading
                                              data-action="submit->review-action#submitReject">
                                            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_withdrawal_action_' ~ withdrawal.id) }}">
                                            <input type="hidden" name="reviewNote">
                                            <button type="submit" class="btn btn-reject"
                                                    data-testid="btn-reject-{{ withdrawal.id }}">
                                                Reject
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            {% else %}
                                <div style="display: flex; flex-direction: column; gap: 6px;">
                                    <span class="td-cell--id" style="font-size: 12px;">
                                        {% if withdrawal.reviewedBy %}
                                            By {{ withdrawal.reviewedBy.firstName }}<br>
                                            {{ withdrawal.reviewedAt|date('M d, Y h:i A') }}
                                        {% else %}
                                            —
                                        {% endif %}
                                    </span>
                                    <form method="post"
                                          enctype="multipart/form-data"
                                          action="{{ path('app_wfbo_withdrawal_attach_receipt', {id: withdrawal.id}) }}"
                                          data-turbo="false"
                                          style="display: flex; flex-direction: column; gap: 4px;">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_attach_receipt_' ~ withdrawal.id) }}">
                                        <input type="hidden" name="page" value="{{ currentPage }}">
                                        {% if currentStatus %}<input type="hidden" name="status" value="{{ currentStatus }}">{% endif %}
                                        <input type="file" name="receipt" accept="image/*,application/pdf"
                                               class="table-input" style="font-size: 11px; padding: 4px;"
                                               data-testid="input-attach-receipt-{{ withdrawal.id }}">
                                        <button type="submit" class="btn"
                                                style="font-size: 11px; padding: 4px 8px; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer;">
                                            {{ withdrawal.receiptPath ? 'Replace Receipt' : 'Attach Receipt' }}
                                        </button>
                                    </form>
                                    {% if withdrawal.receiptPath %}
                                        {% set ext = withdrawal.receiptPath|split('.')|last|lower %}
                                        {% if ext in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
                                            <button type="button"
                                                    class="btn-receipt-view"
                                                    onclick="openReceiptModal('{{ withdrawal.receiptPath }}')"
                                                    data-testid="btn-view-receipt-{{ withdrawal.id }}">
                                                View Receipt
                                            </button>
                                        {% else %}
                                            <a href="{{ withdrawal.receiptPath }}"
                                               target="_blank" rel="noopener"
                                               class="btn-receipt-view"
                                               data-testid="btn-view-receipt-{{ withdrawal.id }}">
                                                View PDF
                                            </a>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            {% endif %}
                        </td>

                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="td-empty">
                            No withdrawals found.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# Pagination #}
    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="withdrawals-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_withdrawals', {page: currentPage - 1, status: currentStatus, search: search}|filter(v => v is not null and v != '')) }}"
                   class="btn-page-prev">
                    ← Previous
                </a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_withdrawals', {page: currentPage + 1, status: currentStatus, search: search}|filter(v => v is not null and v != '')) }}"
                   class="btn-page-next">
                    Next →
                </a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {# ── Receipt popup modal ── #}
    <dialog id="receipt-modal" style="padding: 0; border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); max-width: 90vw; max-height: 90vh; background: #fff;">
        <div style="display: flex; flex-direction: column; max-width: 90vw; max-height: 90vh;">
            <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb;">
                <span style="font-weight: 600; font-size: 14px; color: #111827;">Receipt</span>
                <button type="button" onclick="document.getElementById('receipt-modal').close()"
                        style="background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: #6b7280; padding: 0 4px;"
                        aria-label="Close">&times;</button>
            </div>
            <div style="overflow: auto; padding: 16px; display: flex; align-items: center; justify-content: center;">
                <img id="receipt-modal-img" src="" alt="Receipt" style="max-width: 100%; max-height: 70vh; border-radius: 6px; display: block;">
            </div>
        </div>
    </dialog>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
function openReceiptModal(src) {
    document.getElementById('receipt-modal-img').src = src;
    document.getElementById('receipt-modal').showModal();
}
document.getElementById('receipt-modal').addEventListener('click', function(e) {
    if (e.target === this) this.close();
});
</script>
<style>
.btn-receipt-view {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn-receipt-view:hover { background: #e5e7eb; }
dialog::backdrop { background: rgba(0,0,0,0.5); }
</style>
{% endblock %}