{% 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>

        {{ form_start(depositForm, {attr: {
            'data-testid': 'deposit-form',
            'data-controller': 'form-validate',
            '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.</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 %}