{% extends 'django_ledger/layouts/content_layout_1.html' %}
{% load i18n %}
{% load django_ledger %}

{% block view_content %}

    <div class="box">
        <div class="columns">
            <div class="column is-one-third">
                {% include 'django_ledger/customer/includes/card_customer.html' with customer=customer %}
            </div>
            <div class="column">
                <div class="content">
                    <h3 class="title is-4">
                        <span class="icon is-small">{% icon 'mdi:receipt-text' 24 %}</span>
                        {% trans 'Receipts' %}
                    </h3>
                    {% if receipts %}
                        <div class="table-container">
                            <table class="table is-fullwidth is-narrow is-striped is-bordered">
                                <thead>
                                <tr>
                                    <th class="has-text-centered">{% trans 'Receipt Number' %}</th>
                                    <th class="has-text-centered">{% trans 'Date' %}</th>
                                    <th class="has-text-centered">{% trans 'Type' %}</th>
                                    <th class="has-text-centered">{% trans 'Actions' %}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for receipt in receipts %}
                                    <tr class="has-text-centered">
                                        <td>
                                            <a href="{{ receipt.get_absolute_url }}">{{ receipt.receipt_number }}</a>
                                        </td>
                                        <td>{{ receipt.receipt_date }}</td>
                                        <td>{{ receipt.receipt_type|title }}</td>
                                        <td>
                                            {% if receipt.get_import_job_url %}
                                                <a class="button is-small is-primary"
                                                   href="{{ receipt.get_import_job_url }}">{% trans 'Bank Feed Job' %}</a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="has-text-grey">{% trans 'No receipts found for this customer.' %}</p>
                    {% endif %}

                    <hr>

                    <h3 class="title is-4">
                        <span class="icon is-small">{% icon 'mdi:file-document-edit-outline' 24 %}</span>
                        {% trans 'Invoices' %}
                    </h3>
                    {% if invoices %}
                        <div class="table-container">
                            <table class="table is-fullwidth is-narrow is-striped is-bordered">
                                <thead>
                                <tr>
                                    <th class="has-text-centered">{% trans 'Invoice Number' %}</th>
                                    <th class="has-text-centered">{% trans 'Status' %}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for invoice in invoices %}
                                    <tr class="has-text-centered">
                                        <td><a href="{{ invoice.get_absolute_url }}">{{ invoice.invoice_number }}</a>
                                        </td>
                                        <td>{{ invoice.get_invoice_status_display }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="has-text-grey">{% trans 'No invoices found for this customer.' %}</p>
                    {% endif %}

                </div>
            </div>
        </div>
    </div>

{% endblock %}