{% extends 'base.html.twig' %}

{% block title %}My Deposits{% endblock %}

{% block body %}
<div class="container page-container" data-testid="deposit-page">

    <h1 data-testid="deposit-page-title">
        Deposits
    </h1>
    <p class="wfbo-card-desc mb-5">
        Submit a deposit request and track its status below.
    </p>

    {# ── Approval hours notice ── #}
    <div class="alert alert-warning mb-4" role="alert" data-testid="approval-hours-banner">
        <strong>Note:</strong> Approvals are processed from <strong>9:00 AM to 11:59 PM</strong> only.
    </div>

    {# ── Payment Details ── #}
    {% if paymentDetails is not empty %}
    <div class="mb-4" data-testid="deposit-payment-details">
        <p class="form-label--sm mb-2">Send payment to one of the following accounts:</p>
        <div class="d-flex flex-wrap gap-3">
            {% for detail in paymentDetails %}
            <div class="payment-detail-card" data-testid="payment-detail-{{ detail.id }}">
                <p class="payment-detail-card__row">
                    <span class="payment-detail-card__key">Bank:</span>
                    <strong class="ms-1">{{ detail.bankName }}</strong>
                </p>
                <p class="payment-detail-card__row">
                    <span class="payment-detail-card__key">Account Name:</span>
                    <strong class="ms-1">{{ detail.accountName }}</strong>
                </p>
                <p class="payment-detail-card__row payment-detail-card__row--copyable mb-0">
                    <span>
                        <span class="payment-detail-card__key">Account #:</span>
                        <strong class="ms-1 font-mono-sm">{{ detail.accountNumber }}</strong>
                    </span>
                    <button type="button"
                            class="btn-copy"
                            data-controller="copy"
                            data-copy-text-value="{{ detail.accountNumber }}"
                            data-action="copy#copy"
                            aria-label="Copy account number"
                            data-testid="btn-copy-account-number-{{ detail.id }}">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                    </button>
                </p>
            </div>
            {% endfor %}
        </div>
        <p class="form-hint mt-2">After sending, fill in the form below with your transaction reference number.</p>
    </div>
    {% endif %}

    {# ── Deposit Form ── #}
    {% if depositBlocked %}
        <div class="alert alert-warning mb-5" role="alert">
            <strong>Deposits Unavailable:</strong> Deposits are currently disabled for your account type.
            If you have any questions, please contact support.
        </div>
    {% else %}
    <div class="card card--white mb-5" style="border: 1px solid #e5e7eb; padding: 28px 24px;">
        <h2 class="wfbo-card-title mb-4">New Deposit Request</h2>

        {# ── Receipt-sharing warning ── #}
        <div class="alert alert-warning mb-4" role="alert" data-testid="deposit-receipt-warning">
            <strong>Do Not Share Your Receipt</strong>
            <p class="mb-0 mt-1">
                Never share your transaction receipt or reference number with anyone or in group
                chats. It may be used by others to access or verify your transaction.
                The site is not liable for any issues caused by sharing your transaction details.
            </p>
        </div>

        {{ form_start(depositForm, {attr: {
            'data-testid': 'deposit-form',
            'data-controller': 'form-validate deposit-bank-other',
            'data-form-validate-min-value': minimumDepositAmount > 0 ? minimumDepositAmount : '0',
            'novalidate': 'novalidate',
            'data-turbo': 'false'
        }}) }}

            <div class="mb-3">
                {{ form_label(depositForm.paymentDetail, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(depositForm.paymentDetail) }}
                {{ form_errors(depositForm.paymentDetail) }}
                <p class="form-hint">Select the account you sent money to. If it's no longer listed, choose "Others" below.</p>
            </div>

            <div class="mb-3" data-deposit-bank-other-target="otherWrapper" hidden>
                {{ form_label(depositForm.paymentDetailOther, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(depositForm.paymentDetailOther) }}
                {{ form_errors(depositForm.paymentDetailOther) }}
                <p class="form-hint">Only inactive accounts are listed here — pick the one you already sent money to.</p>
            </div>

            <div class="mb-3">
                {{ form_label(depositForm.amount, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(depositForm.amount) }}
                {{ form_errors(depositForm.amount) }}
                {% if minimumDepositAmount > 0 %}
                    <p class="form-hint">Minimum deposit amount is ₱{{ minimumDepositAmount|number_format(2) }}.</p>
                {% endif %}
            </div>

            <div class="mb-3">
                {{ form_label(depositForm.transactionReference, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(depositForm.transactionReference) }}
                <div data-testid="transaction-reference-errors">
                    {{ form_errors(depositForm.transactionReference) }}
                </div>
                <p class="form-hint">Your bank / e-wallet transaction or reference number.</p>
            </div>

            <div class="mb-3">
                {{ form_label(depositForm.notes, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(depositForm.notes) }}
            </div>

            <div class="mb-4">
                {{ form_label(depositForm.transactionImage, null, {label_attr: {class: 'form-label--sm', style: 'color: #000000;'}}) }}
                {{ form_widget(depositForm.transactionImage, {attr: {style: 'color: #000000;'}}) }}
                {{ form_errors(depositForm.transactionImage) }}
                <p class="form-hint">Attach a screenshot or PDF of your transaction (max 10 MB).</p>
            </div>

            <button type="submit"
                    class="btn btn-form-submit"
                    data-testid="btn-deposit-submit">
                Submit Deposit Request
            </button>

        {{ form_end(depositForm) }}
    </div>
    {% endif %}

    {# ── Deposit History ── #}
    <h2 class="mb-3">History</h2>

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="deposit-history-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Date</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">Ref. No.</th>
                        <th class="th-white">Notes</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">Review Note</th>
                        <th class="th-white">Receipt</th>
                    </tr>
                </thead>
                <tbody>
                    {% for deposit in deposits %}
                    <tr class="table-row" data-testid="deposit-row-{{ deposit.id }}">
                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {{ deposit.createdAt|date('M d, Y') }}
                        </td>
                        <td class="td-cell">
                            <p class="fw-semibold mb-0">{{ deposit.amount|number_format(2) }}</p>
                            {% if deposit.approvedAmount is not null and deposit.approvedAmount != deposit.amount %}
                                <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 font-mono-sm">
                            {{ deposit.transactionReference ?? '—' }}
                        </td>
                        <td class="td-cell td-cell--dark">
                            {{ deposit.notes ?? '—' }}
                        </td>
                        <td class="td-cell">
                            {% if deposit.status == 'pending' %}
                                <span class="badge-status badge-status--pending" data-testid="badge-status-{{ deposit.id }}">
                                    Pending
                                </span>
                            {% elseif deposit.status == 'approved' %}
                                <span class="badge-status badge-status--approved" data-testid="badge-status-{{ deposit.id }}">
                                    Approved
                                </span>
                            {% else %}
                                <span class="badge-status badge-status--rejected" data-testid="badge-status-{{ deposit.id }}">
                                    Rejected
                                </span>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--muted">
                            {{ deposit.reviewNote ?? '—' }}
                        </td>
                        <td class="td-cell">
                            {% 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
                                    </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 %}
                            {% else %}
                                <span class="td-cell--id" style="color: #9ca3af;">—</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="td-empty">
                            No deposit requests yet.
                        </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="deposit-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_deposit', {page: currentPage - 1}) }}"
                   class="btn-page-prev">
                    ← Previous
                </a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_deposit', {page: currentPage + 1}) }}"
                   class="btn-page-next">
                    Next →
                </a>
            {% endif %}
        </div>
    </div>
    {% endif %}

</div>

{# ── 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); }
input[type="file"]::file-selector-button {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 8px;
}
input[type="file"]::file-selector-button:hover { background: #e5e7eb; }
</style>
{% endblock %}