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

{% block meta_title %}{{ 'Invoice management'|trans }}{% endblock %}
{% block page_header %}{{ 'Invoice management'|trans }}{% endblock %}

{% block body_class %}invoice-index{% endblock %}
{% block breadcrumb %}
    <li class="breadcrumb-item active" aria-current="page">{{ 'Invoices'|trans }}</li>
{% endblock %}

{% block content %}

    {% set unpaid_invoices = client.invoice_get_list({"status":"unpaid", "per_page":100}) %}
    {% set paid_invoices = client.invoice_get_list({"per_page":10, "page":request.page, "status":"paid"}) %}

    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header py-3 py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-1">{{ 'Invoices'|trans }}</h5>
                            <span class="small text-muted">
                                {{ 'All of your invoices can be found here. You can choose to see either paid or unpaid invoices by clicking corresponding button.'|trans }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <nav>
                        <div class="nav nav-tabs" id="invoice-tab" role="tablist">
                            <button class="nav-link active" id="unpaid-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-unpaid" type="button" role="tab" aria-controls="nav-unpaid"
                                    aria-selected="true">{{ 'Unpaid'|trans }}{% if unpaid_invoices.total %}&nbsp;<span
                                    class="badge bg-danger">{{ unpaid_invoices.total }}</span>{% endif %}</button>
                            <button class="nav-link" id="paid-tab" data-bs-toggle="tab" data-bs-target="#nav-paid"
                                    type="button" role="tab" aria-controls="nav-paid"
                                    aria-selected="false">{{ 'Paid'|trans }}&nbsp;<span
                                    class="badge bg-secondary">{{ paid_invoices.total }}</span></button>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active table-responsive" id="nav-unpaid" role="tabpanel"
                             aria-labelledby="nav-home-tab" tabindex="0">
                            <table class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>{{ 'Title'|trans }}</th>
                                    <th>{{ 'Invoice Date'|trans }}</th>
                                    <th>{{ 'Due Date'|trans }}</th>
                                    <th>{{ 'Total'|trans }}</th>
                                    <th>{{ 'Actions'|trans }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% if unpaid_invoices.total > 0 %}
                                    {% for i, invoice in unpaid_invoices.list %}
                                        <tr>
                                            <td>{{ 'Invoice'|trans }} #{{ invoice.serie ~ "%05s"|format(invoice.nr) }}</td>
                                            <td>{{ invoice.created_at|format_date }}</td>
                                            <td>{{ invoice.due_at|format_date }}</td>
                                            <td>{{ invoice.total | money(invoice.currency) }}</td>
                                            <td><a class="btn btn-sm btn-success"
                                                   href="{{ 'invoice'|link }}/{{ invoice.hash }}">{{ 'Pay'|trans }}</a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="5">{{ 'The list is empty'|trans }}</td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade table-responsive" id="nav-paid" role="tabpanel" aria-labelledby="nav-profile-tab"
                             tabindex="0">
                            <table class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>{{ 'Title'|trans }}</th>
                                    <th>{{ 'Invoice Date'|trans }}</th>
                                    <th>{{ 'Paid Date'|trans }}</th>
                                    <th>{{ 'Total'|trans }}</th>
                                    <th>{{ 'Actions'|trans }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% if paid_invoices.total > 0 %}
                                    {% for i, invoice in paid_invoices.list %}
                                        <tr>
                                            <td>{{ 'Invoice'|trans }} #{{ invoice.serie ~ "%05s"|format(invoice.nr) }}</td>
                                            <td>{{ invoice.created_at|format_date }}</td>
                                            <td>{{ invoice.paid_at|format_date }}</td>
                                            <td>{{ invoice.total | money(invoice.currency) }}</td>
                                            <td><a href="{{ 'invoice'|link }}/{{ invoice.hash }}"
                                                   class="btn btn-outline-secondary btn-sm">{{ 'View'|trans }}</a></td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="7">{{ 'The list is empty'|trans }}</td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
