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

{% block title %}Deposits — WFBO{% endblock %}
{% block wfbo_title %}Deposits{% 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 %}

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

    {# ── Status filter tabs ── #}
    <div class="d-flex gap-2 mb-4 flex-wrap" data-testid="deposit-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_deposits', {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 }} deposit{{ total != 1 ? 's' : '' }}{{ currentStatus ? ' (' ~ currentStatus ~ ')' : '' }}
        </p>
        <a href="{{ path('app_wfbo_deposits', {page: currentPage, status: currentStatus, search: search}|filter(v => v is not null and v != '')) }}"
           class="btn btn-sm btn-outline-secondary" data-testid="btn-deposits-refresh">
            ↻ Refresh
        </a>
    </div>

    {# ── Table ── #}
    <div class="card table-card" data-testid="deposits-table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="deposits-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">Sent To</th>
                        <th class="th-white">Ref. No.</th>
                        <th class="th-white">Submitted</th>
                        <th class="th-white">Notes</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for deposit in deposits %}
                        {% set paymentLabel  = deposit.paymentDetail ? deposit.paymentDetail.label|upper : '' %}
                        {% set paymentBank   = deposit.paymentDetail ? deposit.paymentDetail.bankName|upper : '' %}
                        {% if paymentLabel == 'GCASH' or paymentBank == 'GCASH' %}
                            {% set rowClass = 'table-row--gcash' %}
                        {% elseif paymentLabel == 'MAYA' or paymentBank == 'MAYA' %}
                            {% set rowClass = 'table-row--maya' %}
                        {% elseif paymentLabel == 'GOTYME' or paymentBank == 'GOTYME' %}
                            {% set rowClass = 'table-row--gotyme' %}
                        {% else %}
                            {% set rowClass = 'table-row--other' %}
                        {% endif %}
                    <tr class="table-row {{ rowClass }}" data-testid="deposit-row-{{ deposit.id }}">

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

                        <td class="td-cell">
                            <p class="fw-medium mb-0">
                                {{ deposit.user.firstName }} {{ deposit.user.lastName }}
                            </p>
                            <p class="text-muted mb-0">{{ deposit.user.userIdentifier }}</p>
                        </td>

                        <td class="td-cell td-cell--nowrap">
                            <p class="amount-primary">{{ deposit.amount|number_format(2) }}</p>
                            {% if deposit.approvedAmount is not null %}
                                <p class="amount-sub stat-value--green fw-semibold">
                                    Approved: {{ deposit.approvedAmount|number_format(2) }}
                                </p>
                            {% endif %}
                        </td>

                        <td class="td-cell td-cell--dark td-cell--nowrap">
                            {% if deposit.paymentDetail %}
                                <p class="fw-medium mb-0">{{ deposit.paymentDetail.label }}</p>
                                <p class="amount-sub text-muted mb-0">{{ deposit.paymentDetail.bankName }}</p>
                                <p class="amount-sub text-muted mb-0 font-mono-sm">{{ deposit.paymentDetail.accountNumber }}</p>
                            {% else %}
                                —
                            {% endif %}
                        </td>

                        <td class="td-cell td-cell--dark td-cell--nowrap font-mono-sm">
                            {{ deposit.transactionReference ?? '—' }}
                        </td>

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

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

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

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

                                    {# Approved amount override #}
                                    <input type="number"
                                           step="0.01" min="0.01"
                                           placeholder="Approved amount (optional)"
                                           class="table-input"
                                           data-review-action-target="amountInput"
                                           data-testid="input-approved-amount-{{ deposit.id }}">

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

                                    <div class="d-flex gap-2">
                                        {# Approve #}
                                        <form method="post"
                                              action="{{ path('app_wfbo_deposit_action', {id: deposit.id, action: 'approve'}) }}"
                                              data-testid="form-approve-{{ deposit.id }}"
                                              data-turbo="false"
                                              data-no-loading
                                              data-action="submit->review-action#submitApprove">
                                            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_deposit_action_' ~ deposit.id) }}">
                                            <input type="hidden" name="reviewNote">
                                            <input type="hidden" name="approvedAmount">
                                            <button type="submit" class="btn btn-approve"
                                                    data-testid="btn-approve-{{ deposit.id }}">
                                                Approve
                                            </button>
                                        </form>

                                        {# Reject #}
                                        <form method="post"
                                              action="{{ path('app_wfbo_deposit_action', {id: deposit.id, action: 'reject'}) }}"
                                              data-testid="form-reject-{{ deposit.id }}"
                                              data-turbo="false"
                                              data-no-loading
                                              data-action="submit->review-action#submitReject">
                                            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_deposit_action_' ~ deposit.id) }}">
                                            <input type="hidden" name="reviewNote">
                                            <button type="submit" class="btn btn-reject"
                                                    data-testid="btn-reject-{{ deposit.id }}">
                                                Reject
                                            </button>
                                        </form>
                                    </div>

                                    {% if deposit.transactionImagePath %}
                                        {% set ext = deposit.transactionImagePath|split('.')|last|lower %}
                                        {% if ext in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
                                            <button type="button"
                                                    class="btn-receipt-view"
                                                    onclick="openDepositImageModal('{{ deposit.transactionImagePath }}')"
                                                    data-testid="btn-view-transaction-image-{{ deposit.id }}">
                                                View Transaction
                                            </button>
                                        {% else %}
                                            <a href="{{ deposit.transactionImagePath }}"
                                               target="_blank" rel="noopener"
                                               class="btn-receipt-view"
                                               data-testid="btn-view-transaction-image-{{ deposit.id }}">
                                                View PDF
                                            </a>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            {% else %}
                                <div style="display: flex; flex-direction: column; gap: 6px;">
                                    <span class="td-cell--id" style="font-size: 12px;">
                                        {% if deposit.reviewedBy %}
                                            By {{ deposit.reviewedBy.firstName }}<br>
                                            {{ deposit.reviewedAt|date('M d, Y h:i A') }}
                                        {% else %}
                                            —
                                        {% endif %}
                                    </span>
                                    {% if deposit.transactionImagePath %}
                                        {% set ext = deposit.transactionImagePath|split('.')|last|lower %}
                                        {% if ext in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
                                            <button type="button"
                                                    class="btn-receipt-view"
                                                    onclick="openDepositImageModal('{{ deposit.transactionImagePath }}')"
                                                    data-testid="btn-view-transaction-image-{{ deposit.id }}">
                                                View Transaction
                                            </button>
                                        {% else %}
                                            <a href="{{ deposit.transactionImagePath }}"
                                               target="_blank" rel="noopener"
                                               class="btn-receipt-view"
                                               data-testid="btn-view-transaction-image-{{ deposit.id }}">
                                                View PDF
                                            </a>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            {% endif %}
                        </td>

                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="td-empty">
                            No deposits 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="deposits-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_deposits', {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_deposits', {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 %}

    {# ── Transaction image popup modal ── #}
    <dialog id="deposit-image-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;">Transaction Image</span>
                <button type="button" onclick="document.getElementById('deposit-image-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="deposit-image-modal-img" src="" alt="Transaction Image" style="max-width: 100%; max-height: 70vh; border-radius: 6px; display: block;">
            </div>
        </div>
    </dialog>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
function openDepositImageModal(src) {
    document.getElementById('deposit-image-modal-img').src = src;
    document.getElementById('deposit-image-modal').showModal();
}
document.getElementById('deposit-image-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 %}