{% extends "base.html" %}
{% import "macros/admin_pagination_footer.html" as pag %}

{% block page_title %}My Wallet{% endblock %}

{% block head %}
<link rel="stylesheet" href="/plugins/wallet/assets/css/wallet.ui.css">
{% endblock %}

{% block content %}
<main class="wallet-app mx-auto my-6 w-full max-w-6xl px-4 sm:px-6" aria-labelledby="wallet-page-title">
    <h1 id="wallet-page-title" class="mb-5 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">My Wallet</h1>
    <section class="wallet-header">
        <div class="wallet-balance-card">
            <div class="balance-label">Current Balance</div>
            <div class="balance-amount">
                {% if denomination_is_currency %}
                {{ denomination_symbol | default(value='₹') }}{{ balance | default(value=0) | price }}
                {% else %}
                {{ balance_denomination_display | default(value='0') }} {{ denomination_symbol | default(value='💎') }}
                {% endif %}
                {% if denomination_label and not denomination_is_currency %}<span class="balance-denomination-label">{{ denomination_label }}</span>{% endif %}
            </div>
        </div>
        <div class="wallet-actions">
            {% if topup_enabled %}
            <button type="button" id="btn-wallet-topup" class="wallet-topup-btn">
                <i class="fas fa-plus-circle" aria-hidden="true"></i> {% if denomination_is_currency %}Add funds{% else %}Add denomination{% endif %}
            </button>
            {% endif %}
        </div>
    </section>

    <p class="wallet-closed-loop-notice text-muted" role="note">
        Wallet balance is closed-loop stored value for use on this platform only.
        <a href="{{ wallet_terms_anchor | default(value='/terms#wallet') }}">View Wallet terms</a>
    </p>

    <div id="wallet-payment-config" hidden
         data-gateway-script-url="{{ gateway_script_url | default(value='') }}"
         data-active-gateway="{{ active_gateway | default(value='') }}"
         data-online-payment-available="{% if topup_enabled %}true{% else %}false{% endif %}"
         data-topup-default-amount="{{ topup_default_amount | default(value='500') }}"
         data-topup-min-amount="{{ topup_min_amount | default(value='10') }}"
         data-currency-symbol="{{ currency_symbol | default(value='₹') }}"
         data-currency-code="{{ currency_code | default(value='INR') }}"
         data-denomination-symbol="{{ denomination_symbol | default(value='💎') }}"
         data-denomination-is-currency="{% if denomination_is_currency %}true{% else %}false{% endif %}"
         data-denominations-per-currency-unit="{{ denominations_per_currency_unit | default(value='10') }}"></div>

    <section class="transaction-history" id="transaction-history-container" aria-labelledby="wallet-history-title">
        <div class="history-header">
            <h2 id="wallet-history-title">Transaction History</h2>
            <div class="pagination-summary" id="wallet-history-summary">
                Showing {{ transactions | length }} of {{ total }} entries
            </div>
        </div>
        <div class="table-responsive">
            <table class="wallet-table blocks-admin-table" id="transactions-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Description</th>
                        <th>Type</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody id="transactions-body">
                    {% for trans in transactions %}
                    <tr class="transaction-row">
                        <td data-label="Date">{{ trans.created_at | date_in_tz(timezone=settings.timezone) }}</td>
                        <td data-label="Description">{{ trans.description }}</td>
                        <td data-label="Type">
                            <span class="badge badge-{{ trans.type }}">
                                {{ trans.type | capitalize }}
                            </span>
                        </td>
                        <td data-label="Amount" class="amount {{ trans.type }}">
                            {% if trans.type == 'credit' %}+{% else %}-{% endif %}
                            {% if denomination_is_currency %}
                            {{ denomination_symbol | default(value='₹') }}{{ trans.amount | default(value=0) | price }}
                            {% else %}
                            {{ trans.display_denomination | default(value='0') }} {{ denomination_symbol | default(value='💎') }}
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center">No transactions found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {{ pag::simple_footer(prefix="wallet-history", page=page, total_pages=total_pages, total=total, item_label="entries", hide_when_single=true) }}
    </section>

    <div id="wallet-config"
         data-currency-symbol="{{ currency_symbol | default(value='₹') }}"
         data-denomination-symbol="{{ denomination_symbol | default(value='💎') }}"
         data-denomination-is-currency="{% if denomination_is_currency %}true{% else %}false{% endif %}"
         data-denominations-per-currency-unit="{{ denominations_per_currency_unit | default(value='10') }}"
         data-current-page="{{ page }}"
         data-total-pages="{{ total_pages }}"
         hidden></div>
</main>

<div id="wallet-topup-modal-root" hidden>
    <div class="wallet-topup-modal-overlay" id="wallet-topup-modal" role="dialog" aria-modal="true" aria-labelledby="wallet-topup-title" aria-describedby="wallet-topup-help">
        <div class="wallet-topup-modal-content">
            <button type="button" class="wallet-topup-modal-close" id="wallet-topup-modal-close" aria-label="Close top-up dialog">&times;</button>
            <div class="wallet-topup-modal-header"><h2 class="wallet-topup-modal-title" id="wallet-topup-title">Add funds</h2></div>
            <div class="wallet-topup-input-group">
                <label class="wallet-topup-input-label" for="wallet-topup-amount">Amount (<span id="wallet-topup-currency-symbol">₹</span>)</label>
                <input type="number" id="wallet-topup-amount" class="wallet-topup-input-field" placeholder="Enter amount" min="10" step="0.01" value="500" aria-describedby="wallet-topup-help wallet-topup-preview">
                <p id="wallet-topup-help" class="mt-2 text-sm text-muted">Choose how much to add. Payment is processed securely by your configured provider.</p>
                <p id="wallet-topup-preview" class="wallet-topup-preview text-muted" hidden></p>
            </div>
            <div class="wallet-feedback" data-wallet-topup-feedback role="status" aria-live="polite" hidden></div>
            <div class="wallet-topup-modal-footer">
                <button type="button" class="wallet-topup-btn-secondary" id="wallet-topup-cancel">Cancel</button>
                <button type="button" class="wallet-topup-btn-primary" id="wallet-topup-confirm">Proceed to Pay</button>
            </div>
        </div>
    </div>
</div>
<div id="wallet-topup-processing" class="wallet-topup-processing" role="dialog" aria-modal="true" aria-labelledby="wallet-topup-processing-title" aria-describedby="wallet-topup-processing-text" aria-hidden="true" hidden>
    <div class="wallet-topup-processing-card"><div class="wallet-processing-spinner" aria-hidden="true"></div><h3 id="wallet-topup-processing-title"></h3><p id="wallet-topup-processing-text"></p></div>
</div>
<script src="/static/js/blocks-admin-pagination.js"></script>
<script src="/plugins/wallet/assets/js/wallet.js"></script>
{% endblock %}