{% extends "base.html" %}

{% block content %}
<section class="hero-card">
  <p class="kicker">{{ tr("Wallet") }}</p>
  <h1>{{ tr("Top-up TIC via MBank") }}</h1>
  <p class="lead">
    {{ tr("Enter top-up amount in TIC. Minimum is {amount} TIC.", amount=min_topup_tic|ticfmt) }}
    {{ tr("Keep transfer description exactly equal to your deposit code.") }}
  </p>
  <p class="muted">{{ tr("Exchange rate: 1 TIC = 1 VND") }}</p>
  <p class="muted"><strong>{{ tr("If your balance is not credited after 5 minutes, contact") }} <a href="https://zalo.me/0376793989" target="_blank" rel="noopener noreferrer">Zalo</a></strong></p>
</section>

<section class="wallet-summary-grid" aria-label="Wallet summary">
  <article class="wallet-summary-card is-topup">
    <p class="wallet-summary-value">{{ wallet_summary['total_topup_tic']|ticfmt }} TIC</p>
    <p class="wallet-summary-label">{{ tr("Total Top-up") }}</p>
  </article>
  <article class="wallet-summary-card is-used">
    <p class="wallet-summary-value">{{ wallet_summary['used_amount_tic']|ticfmt }} TIC</p>
    <p class="wallet-summary-label">{{ tr("Used Amount") }}</p>
  </article>
  <article class="wallet-summary-card is-current">
    <p class="wallet-summary-value">{{ wallet_summary['current_balance_tic']|ticfmt }} TIC</p>
    <p class="wallet-summary-label">{{ tr("Current Balance") }}</p>
  </article>
</section>

<section class="panel">
  <h2>{{ tr("Create Top-up Request") }}</h2>
  <form method="post" action="{{ url_for('create_topup') }}" class="form-grid">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />

    <label>
      {{ tr("Amount (TIC)") }}
      <input type="number" name="amount_tic" min="{{ min_topup_tic }}" step="1" required />
    </label>

    <label>
      {{ tr("Rule") }}
      <input type="text" value="{{ tr('Minimum {amount} TIC', amount=min_topup_tic|ticfmt) }}" readonly />
    </label>

    <button type="submit" class="btn primary">{{ tr("Create Top-up QR") }}</button>
  </form>

</section>

{% if pending_topup %}
<section
  class="panel live-topup-panel"
  data-status-url="{{ url_for('wallet_topup_status', topup_id=pending_topup['id']) }}"
  data-refresh-interval-ms="8000"
  data-msg-auto-start="{{ tr('Auto-checking payment status...') }}"
  data-msg-auto-failed="{{ tr('Auto-check failed ({status}). Retrying...') }}"
  data-msg-invalid-status="{{ tr('Cannot read top-up status. Retrying...') }}"
  data-msg-paid="{{ tr('Payment matched. Reloading page...') }}"
  data-msg-status-changed="{{ tr('Top-up status changed to {status}. Reloading page...') }}"
  data-msg-waiting="{{ tr('Waiting for transfer... Last checked at {time}.') }}"
  data-msg-just-now="{{ tr('just now') }}"
  data-msg-reach-error="{{ tr('Cannot reach server while auto-checking. Retrying...') }}"
>
  <h2>{{ tr("Pending Top-up") }}</h2>
  <div class="grid-two topup-preview">
    <article>
      <p><strong>{{ tr("Amount") }}:</strong> {{ pending_topup['amount_tic']|ticfmt }} TIC</p>
      <p><strong>{{ tr("Bank") }}:</strong> {{ pending_topup['bank_name'] }}</p>
      <p><strong>{{ tr("Account Number") }}:</strong> {{ pending_topup['account_number'] }}</p>
      <p><strong>{{ tr("Account Name") }}:</strong> {{ pending_topup['account_name'] }}</p>
      <p><strong>{{ tr("Deposit Code") }}:</strong> <span class="code-chip">{{ pending_topup['deposit_code'] }}</span></p>
      <p><strong>{{ tr("Status") }}:</strong> <span id="pending-status-value">{{ pending_topup['status'] }}</span></p>
      <p><strong>{{ tr("Transaction Ref") }}:</strong> <span id="pending-ref-value">{{ pending_topup['matched_transaction_ref'] or '-' }}</span></p>
      <p><strong>{{ tr("Paid At") }}:</strong> <span id="pending-paid-at-value">{{ (pending_topup['paid_at']|dtfmt) if pending_topup['paid_at'] else '-' }}</span></p>
      <p><strong>{{ tr("Your Wallet") }}:</strong> <span id="pending-wallet-balance">{{ current_user['wallet_balance']|ticfmt }} TIC</span></p>
      <p><strong>{{ tr("Expire At") }}:</strong> {{ pending_topup['expires_at']|dtfmt }}</p>
      <p id="pending-live-note" class="live-note">{{ tr("Auto-checking payment status every 8 seconds...") }}</p>
    </article>
    <article class="qr-wrap">
      <img class="qr-image" src="{{ pending_topup['qr_url'] }}" alt="MBank top-up QR" />
      <p class="muted">{{ tr("Scan this QR and keep transfer message as your deposit code.") }}</p>
    </article>
  </div>
</section>
{% endif %}

<section class="panel">
  <h2>{{ tr("Top-up History") }}</h2>
  {% if not topups %}
    <p class="muted">{{ tr("No top-up requests yet.") }}</p>
  {% else %}
  <div class="table-shell">
    <table>
      <thead>
        <tr>
          <th>{{ tr("ID") }}</th>
          <th>{{ tr("Amount") }}</th>
          <th>{{ tr("Code") }}</th>
          <th>{{ tr("Status") }}</th>
          <th>{{ tr("Transaction Ref") }}</th>
          <th>{{ tr("Created") }}</th>
          <th>{{ tr("Paid At") }}</th>
        </tr>
      </thead>
      <tbody>
        {% for item in topups %}
        <tr>
          <td>#{{ item['id'] }}</td>
          <td>{{ item['amount_tic']|ticfmt }} TIC</td>
          <td><span class="code-chip">{{ item['deposit_code'] }}</span></td>
          <td>{{ item['status'] }}</td>
          <td>{{ item['matched_transaction_ref'] or '-' }}</td>
          <td>{{ item['created_at']|dtfmt }}</td>
          <td>{{ (item['paid_at']|dtfmt) if item['paid_at'] else '-' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</section>

{% if pending_topup %}
<script src="{{ url_for('static', filename='wallet-live-status.js') }}"></script>
{% endif %}
{% endblock %}