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

{% 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 %}
    <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>
                            <h1 class="mb-1">{{ 'Invoices'|trans }}</h1>
                            <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 text-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 }}{% if paid_invoices.total %}&nbsp;<span
                                    class="badge text-bg-secondary">{{ paid_invoices.total }}</span>{% endif %}</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>
                                {% set unpaid_invoices = client.invoice_get_list({"status":"unpaid", "per_page":10, "page":request.page}) %}
                                {% 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|format_currency(invoice.currency ?? default_currency) }}</td>
                                        <td><a class="btn btn-sm btn-success" href='{{ "invoice/#{invoice.hash}"|url }}'>{{ 'Pay'|trans }}</a>
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="5">{{ 'The list is empty'|trans }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            {{ include('partial_pagination.html.twig', { 'list': unpaid_invoices }) }}
                        </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>
                                {% set paid_invoices = client.invoice_get_list({"per_page":10, "page":request.page, "status":"paid"}) %}
                                {% 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|format_currency(invoice.currency ?? default_currency) }}</td>
                                        <td><a href='{{ "invoice/#{invoice.hash}"|url }}' class="btn btn-outline-secondary btn-sm">{{ 'View'|trans }}</a></td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="7">{{ 'The list is empty'|trans }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            {{ include('partial_pagination.html.twig', { 'list': paid_invoices }) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const tabParam = urlParams.get('tab');
        const pageParam = urlParams.get('page');

        if (tabParam === 'paid') {
            const paidTab = document.getElementById('paid-tab');
            if (paidTab) {
                const tab = new bootstrap.Tab(paidTab);
                tab.show();
            }
        }

        // Update URL when tabs are clicked.
        document.getElementById('unpaid-tab').addEventListener('shown.bs.tab', function() {
            // Reset to base URL without tab parameter and reload.
            const newUrl = new URL(window.location.href);
            newUrl.searchParams.delete('tab');
            newUrl.searchParams.delete('page');
            window.location.href = newUrl.toString();
        });

        document.getElementById('paid-tab').addEventListener('shown.bs.tab', function() {
            // Set tab to 'paid', reset page parameter and reload.
            const newUrl = new URL(window.location.href);
            newUrl.searchParams.set('tab', 'paid');
            newUrl.searchParams.delete('page');
            window.location.href = newUrl.toString();
        });
    });
</script>
{% endblock %}
