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

{% block view_content %}
    <div class="columns">
        <div class="column is-4">
            <div class="columns is-multiline">
                <div class="column is-12">
                    {% include 'django_ledger/bills/includes/card_bill.html' with bill=bill entity_slug=view.kwargs.entity_slug style='bill-detail' %}
                </div>
                <div class="column is-12">
                    {% include 'django_ledger/vendor/includes/card_vendor.html' with vendor=bill.vendor %}
                </div>
                <div class="column is-12">
                    <a class="button is-info is-fullwidth is-outlined"
                       href="{% url 'django_ledger:bill-list' entity_slug=view.kwargs.entity_slug %}">
                        {% trans 'Bill List' %}
                    </a>
                </div>
            </div>
        </div>
        <div class="column is-8">
            <div class="columns is-multiline">
                {% if bill.is_configured %}
                    <div class="column is-12">
                        <nav class="level">
                            <div class="level-item has-text-centered">
                                <div>
                                    <p class="heading">{% trans 'Cash Account' %}:
                                        <a href="{% url 'django_ledger:account-detail' account_pk=bill.cash_account.uuid coa_slug=bill.cash_account.coa_model.slug entity_slug=view.kwargs.entity_slug %}"
                                           class="has-text-danger">{{ bill.cash_account.code }}</a>
                                    <p class="title" id="djl-bill-detail-amount-paid">
                                        {% currency_symbol %}{{ bill.get_amount_cash | absolute | currency_format }}</p>
                                </div>
                            </div>

                            {% if bill.accrue %}
                                <div class="level-item has-text-centered">
                                    <div>
                                        <p class="heading">{% trans 'Prepaid Account' %}:
                                            <a href="{% url 'django_ledger:account-detail' account_pk=bill.prepaid_account.uuid coa_slug=bill.prepaid_account.coa_model.slug entity_slug=view.kwargs.entity_slug %}"
                                               class="has-text-danger">{{ bill.prepaid_account.code }}</a>
                                        </p>
                                        <p class="title has-text-success" id="djl-bill-detail-amount-prepaid">
                                            {% currency_symbol %}{{ bill.get_amount_prepaid | currency_format }}</p>
                                    </div>
                                </div>
                                <div class="level-item has-text-centered">
                                    <div>
                                        <p class="heading">{% trans 'Accounts Payable' %}:
                                            <a href="{% url 'django_ledger:account-detail' account_pk=bill.unearned_account.uuid coa_slug=bill.unearned_account.coa_model.slug entity_slug=view.kwargs.entity_slug %}"
                                               class="has-text-danger">{{ bill.unearned_account.code }}</a>
                                        </p>
                                        <p class="title has-text-danger" id="djl-bill-detail-amount-unearned">
                                            {% currency_symbol %}{{ bill.get_amount_unearned | currency_format }}</p>
                                    </div>
                                </div>

                                <div class="level-item has-text-centered">
                                    <div>
                                        <p class="heading">{% trans 'Accrued' %} {{ bill.get_progress | percentage }}</p>
                                        <p class="title">
                                            {% currency_symbol %}{{ bill.get_amount_earned | currency_format }}</p>
                                    </div>
                                </div>
                            {% else %}
                                <div class="level-item has-text-centered">
                                    <div>
                                        <p class="heading">{% trans 'You Still Owe' %}</p>
                                        <p class="title has-text-danger" id="djl-bill-detail-amount-owed">
                                            {% currency_symbol %}{{ bill.get_amount_open | currency_format }}</p>
                                    </div>
                                </div>
                            {% endif %}
                        </nav>
                    </div>
                {% endif %}
                <div class="column is-12">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-header-title has-text-weight-light is-size-3">
                                <span class="icon is-large">{% icon 'grommet-icons:transaction' 36 %}</span>
                                {% trans 'Bill Items' %}
                            </h2>
                        </div>
                        <div class="card-content">
                            <div class="table-container">
                                <table class="table is-fullwidth is-narrow is-striped is-bordered">

                                    <thead>
                                    <tr>
                                        <th>{% trans 'Item' %}</th>
                                        <th>{% trans 'Entity Unit' %}</th>
                                        <th>{% trans 'Unit Cost' %}</th>
                                        <th>{% trans 'Quantity' %}</th>
                                        <th>{% trans 'Total' %}</th>
                                        <th>{% trans 'PO' %}</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {% for bill_item in itemtxs_qs %}
                                        <tr>
                                            <td>{{ bill_item.item_model }}</td>
                                            <td>{% if bill_item.entity_unit %}
                                                {{ bill_item.entity_unit }}{% endif %}</td>
                                            <td>{% currency_symbol %}{{ bill_item.unit_cost | currency_format }}</td>
                                            <td>{{ bill_item.quantity }}</td>
                                            <td>{% currency_symbol %}{{ bill_item.total_amount | currency_format }}</td>
                                            <td>{% if bill_item.po_model_id %}
                                                <a class="button is-small is-light"
                                                   href="{% url 'django_ledger:po-detail' entity_slug=view.kwargs.entity_slug po_pk=bill_item.po_model_id %}">
                                                    {% trans 'View PO' %}
                                                </a>
                                            {% endif %}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>

                                    <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th>{% trans 'Total' %}</th>
                                        <th>
                                            {% currency_symbol %}{{ total_amount__sum | currency_format }}
                                        </th>
                                        <th></th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {% if bill.is_active %}
                    <div class="column is-12">
                        <div class="buttons is-centered">
                            <a href="{% url 'django_ledger:ledger-bs' entity_slug=view.kwargs.entity_slug ledger_pk=bill.ledger_id %}"
                               class="button is-info is-light is-outlined">{% trans 'Balance Sheet' %}</a>
                            <a href="{% url 'django_ledger:ledger-ic' entity_slug=view.kwargs.entity_slug ledger_pk=bill.ledger_id %}"
                               class="button is-info is-light is-outlined">{% trans 'Income Statement' %}</a>
                            <a href="{% url 'django_ledger:ledger-cf' entity_slug=view.kwargs.entity_slug ledger_pk=bill.ledger_id %}"
                               class="button is-info is-light is-outlined">{% trans 'Cash Flow Statement' %}</a>
                        </div>
                    </div>
                    <div class="column is-12">
                        <div class="buttons is-centered">
                            <a href="{% url 'django_ledger:ledger-bs-year' entity_slug=view.kwargs.entity_slug ledger_pk=bill.ledger_id year=bill.get_status_action_date.year %}?format=pdf&report_subtitle={{ bill.generate_descriptive_title | safe }}"
                               class="button is-success is-light is-outlined">
                                {% trans 'Balance Sheet PDF' %}{% icon 'bytesize:download' 24 %}</a>
                            <a href="{% url 'django_ledger:ledger-ic-year' entity_slug=view.kwargs.entity_slug ledger_pk=bill.ledger_id year=bill.get_status_action_date.year %}?format=pdf&report_subtitle={{ bill.generate_descriptive_title | safe }}"
                               class="button is-success is-light is-outlined">
                                {% trans 'Income Statement PDF' %}{% icon 'bytesize:download' 24 %}</a>
                            <a href="{% url 'django_ledger:ledger-cf-year' entity_slug=view.kwargs.entity_slug ledger_pk=bill.ledger_id year=bill.get_status_action_date.year %}?format=pdf&report_subtitle={{ bill.generate_descriptive_title | safe }}"
                               class="button is-success is-light is-outlined">
                                {% trans 'Cash Flow Statement PDF' %}{% icon 'bytesize:download' 24 %}</a>
                        </div>
                    </div>
                {% endif %}

                <div class="column is-12">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-header-title has-text-weight-light is-size-3">
                                <span class="icon is-large">{% icon 'grommet-icons:transaction' 36 %}</span>
                                {% trans 'Bill Transactions' %}
                            </h2>
                        </div>
                        <div class="card-content">
                            {% transactions_table bill %}
                        </div>
                    </div>
                </div>
                <div class=" column is-12">
                    {% include 'django_ledger/includes/card_markdown.html' with style='card_1'  title='Bill Notes' notes_html=bill.notes_html %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
