{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}
{% set active_menu = 'payments' %}

{% block meta_title %}{{ 'Wallet'|trans }}{% endblock %}
{% block breadcrumb %} <li class="breadcrumb-item active" aria-current="page">{{ 'Wallet'|trans }}</li>{% endblock %}

{% set profile = client.profile_get %}

{% block body_class %}client-balance{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h1 class="mb-1">{{ 'Wallet'|trans }}</h1>
                            <span class="small text-muted">{{ 'Here you can manage and track your account balance.'|trans }}</span>
                        </div>
                        <form method="post" class="form-inline d-flex gap-2 justify-content-end" action="{{ 'invoice/funds_invoice'|api_url }}" {{ fb_api_form({callback: 'onAfterInvoiceCreated'}) }}>
                            <input id="appendedPrependedInput" class="form-control w-50" type="text" name="amount" placeholder="0" required="required">
                            <button class="btn btn-primary" type="submit">{{ 'Add Funds'|trans }}</button>
                        </form>
                    </div>
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>{{ 'Description'|trans }}</th>
                                <th>{{ 'Date'|trans }}</th>
                                <th>{{ 'Amount'|trans }}</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% set transactions = client.client_balance_get_list({ "per_page": 10, "page": request.page }) %}
                        {% for i, tx in transactions.list %}
                            <tr>
                                <td>{{ tx.description }}</td>
                                <td>{{ tx.created_at|format_date }}</td>
                                <td>{{ tx.amount|format_currency(tx.currency ?? default_currency) }}</td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="3">{{ 'The list is empty'|trans }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="2">{{ 'Total'|trans }}</td>
                            <td><strong>{{ profile.balance|format_currency(profile.currency ?? default_currency) }}</strong></td>
                        </tr>
                        </tfoot>
                    </table>
                    {{ include('partial_pagination.html.twig', { 'list': transactions }) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
<script>
    function onAfterInvoiceCreated(hash) {
        window.location = '{{ "invoice"|url }}/' + hash;
    }
</script>
{% endblock %}
