{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% import "macro_functions.html.twig" as mf %}

{% 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 api-form d-flex gap-2 justify-content-end" action="{{ 'api/client/invoice/funds_invoice'|link }}" data-api-jsonp="onAfterInvoiceCreated">
                            <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                            <input id="appendedPrependedInput" class="form-control w-50" type="text" name="amount" placeholder="0" required="required">
                            <button class="btn btn-primary" type="submit">{{ 'Add fund'|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|money(tx.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 | money(profile.currency) }}</strong></td>
                        </tr>
                        </tfoot>
                    </table>
                    {{ include('partial_pagination.html.twig', { 'list': transactions }) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
<script>
    function onAfterInvoiceCreated(hash) {
        var link = '{{ "invoice"|link }}/' + hash;
        bb.redirect(link);
    }
</script>
{% endblock %}
