<div class="card-body">

    <% if (transactions.length) { %>
        <div class="table-responsive">
            <table class="table table-hover align-middle text-center">
                <thead class="table-dark">
                    <tr>
                        <th>
                            <%= i18n.__('common.date') %>
                        </th>
                        <th>
                            <%= i18n.__('balanceHistory.amount') %>
                        </th>
                        <th>
                            <%= i18n.__('balanceHistory.type') %>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <% transactions.forEach(function(transaction) { %>
                        <tr>
                            <td>
                                <%= new Date(transaction.createdAt).toLocaleDateString('en-US') %>
                            </td>
                            <td class="<%= transaction.type === 'charge' ? 'text-success' : 'text-danger' %> fw-bold">
                                <%= transaction.amount.toLocaleString() %>
                                    <span class="text-muted small">
                                        <%= i18n.__({ phrase: 'common.currency' , locale: lang }) %>
                                    </span>
                            </td>
                            <td>
                                <span class="badge bg-<%= transaction.type === 'charge' ? 'success' : 'danger' %>">
                                    <%= i18n.__("balanceHistory." + transaction.type) %>
                                </span>
                            </td>
                        </tr>
                        <% }) %>
                </tbody>
            </table>
        </div>
        <% } %>

            <% if (transactions.length===0) { %>
                <div class="d-flex justify-content-center flex-column align-items-center mt-4 text-center">
                    <img src="https://i.ibb.co/Cs06L1dG/empty-removebg-preview-1.png" alt="no data"
                        style="max-width: 200px;" />
                    <span class="mt-2 fw-bold text-muted" style="font-family: cairo;">
                        <%= i18n.__('common.noResultsFound') %>
                    </span>
                </div>
                <% } %>

                    <% if (hasMoreTrans) { %>
                        <div class="text-center mt-3">
                            <button class="btn btn-outline-primary load-more-btn"
                                data-route="/dashboard/balanceHistories/show?userId=<%= r_client.id %>">
                                <i class="ti ti-chevron-down me-1"></i>
                                <%= i18n.__("loadMore") %>
                            </button>
                        </div>
                        <% } %>

</div>

<style>
    .table thead th {
        vertical-align: middle;
    }

    .table td {
        vertical-align: middle;
    }
</style>

<script>
    ajaxLoading(false);

    document.querySelectorAll('.load-more-btn').forEach(button => {
        button.addEventListener('click', function () {
            const url = this.getAttribute('data-route');
            window.location.replace(url);
        });
    });
</script>