{% load i18n %}
{% load static %}
{% load evelinks %}
{% load humanize %}

{% if payment_details %}
    <h4 class="d-none" id="modal-title">
        {% translate "Payment Details" %}
    </h4>
    <input type="hidden" id="modal-hidden-url" value="">
    <div class="row py-2">
        <!-- Information -->
        <div class="col-sm-6" style="min-width: 350px;">
            <div class="card-body bg-secondary rounded">
                <h5 class="card-title text-center">
                    <span id="dashboard-division">{% translate "Payment Information" %}</span>
                </h5>
                <hr>
                <table class="table table-dark table-striped w-100" id="payments-information">
                    <tbody>
                        <tr>
                            <td>{% trans "Payment Account" %}:</td>
                            <td class="text-end">{{ payment_details.account.character.character_portrait|safe }} {{ payment_details.account.character.character_name }}</td>
                        </tr>
                        <tr>
                            <td>{% trans "Amount" %}:</td>
                            <td class="text-end">{{ payment_details.payment.amount|intcomma }} ISK</td>
                        </tr>
                        <tr>
                            <td>{% trans "Division" %}:</td>
                            <td class="text-end">{{ payment_details.payment.division_name }}</td>
                        </tr>
                        <tr>
                            <td>{% trans "Reason" %}:</td>
                            <td class="text-end">{{ payment_details.payment.reason }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Dashboard -->
        <div class="col-sm-6" style="min-width: 350px;">
            <div class="card-body bg-secondary rounded">
                <h5 class="card-title text-center">
                    <span id="dashboard-division">{% translate "Dashboard" %}</span>
                </h5>
                <hr>
                <div>
                    <table class="table table-dark table-striped w-100" id="payments-dashboard">
                        <tbody>
                            <tr>
                                <td>{% trans "Account" %}:</td>
                                <td class="text-end">{{ payment_details.account.payment_status|safe }}</td>
                            </tr>
                            <tr>
                                <td>{% trans "Deposit" %}:</td>
                                <td class="text-end">{{ payment_details.account.payment_pool|intcomma }} ISK</td>
                            </tr>
                            <tr>
                                <td>{% trans "Owner" %}:</td>
                                <td class="text-end">{{ payment_details.account.owner.name }}</td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row py-2">
        <!-- Payment System -->
        <div class="col-sm-12" style="min-width: 700px;">
            <div class="card-body bg-secondary rounded">
                <h5 class="card-title text-center">
                    <span id="dashboard-statistics">{% translate "Payment Status" %}</span>
                </h5>
                <hr>
                {% include "taxsystem/partials/icons/payment-status.html" with request_status=payment_details.payment.request_status %}
            </div>
        </div>
    </div>
    <div class="row py-2">
        <!-- Payment History -->
        <div class="col-sm-12" style="min-width: 700px;" id="dashboard-payment-history">
            <div class="card-body bg-secondary rounded">
                <h5 class="card-title text-center">
                    <span>{% translate "Payment History" %}</span>
                </h5>
                <hr>
                <div>
                    <table class="table table-dark table-striped table-hover w-100" id="payment-history">
                        <thead>
                            <tr>
                                <th scope="col">{% translate "User" %}</th>
                                <th scope="col">{% translate "Date" %}</th>
                                <th scope="col">{% translate "Action" %}</th>
                                <th scope="col">{% translate "Comment" %}</th>
                                <th scope="col">{% translate "Status" %}</th>
                            </tr>
                        </thead>
                        <tbody class="modal-payments-table-body">
                            {% for payment in payment_details.payment_histories %}
                            <tr>
                                <td>{{ payment.reviser }}</td>
                                <td>{{ payment.date }}</td>
                                <td>{{ payment.action }}</td>
                                <td>{{ payment.comment }}</td>
                                <td>{{ payment.status }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(() => {
            const paymentsViewCharacterTableVar = $('#payment-history');

            const tablePayments = paymentsViewCharacterTableVar.DataTable({
                "order": [[ 1, "desc" ]],
            });

            tablePayments.on('draw', function (row, data) {
                $('[data-tooltip-toggle="taxsystem-tooltip"]').tooltip({
                    trigger: 'hover',
                });
            });

            // Tooltip
            $('[data-tooltip-toggle="taxsystem-tooltip"]').tooltip({
                trigger: 'hover',
            });
        });
    </script>
{% else %}
    {% translate "No character found." %}
{% endif %}