{% load trans from i18n %}
{% load currency_symbol from django_ledger %}
{% load icon from django_ledger %}
{% load custom_filters %}
{% load widget_tweaks %}

<form action="{% url 'purchase_order_update_items' entity_slug=entity_slug po_pk=po_model.uuid %}"
      method="post">
    <div class="row g-3">
        <div class="col-12">
            <h1 class="display-4 mb-4">{% trans 'Purchase Order Items' %}</h1>
        </div>
        <div class="col-12">
            <div class="table-responsive">
                {% csrf_token %}
                {{ itemtxs_formset.non_form_errors }}
                {{ itemtxs_formset.management_form }}
                <table class="table table-hover table-bordered">
                    <thead class="table-light">
                        <tr>
                            <th>{% trans 'Item' %}</th>
                            <th>{% trans 'Unit Cost' %}</th>
                            <th>{% trans 'Quantity' %}</th>
                            <th>{% trans 'Unit' %}</th>
                            <th class="text-end">{% trans 'Amount' %}</th>
                            <th>{% trans 'Status' %}</th>
                            {% if itemtxs_formset.can_delete %}
                                <th>{% trans 'Delete' %}</th>
                            {% endif %}
                            <th>{% trans 'Create Bill' %}</th>
                            <th>{% trans 'Bill Paid?' %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for f in itemtxs_formset %}
                            <tr>
                                <td>
                                    {% for hidden_field in f.hidden_fields %}
                                        {{ hidden_field }}
                                    {% endfor %}
                                    {{ f.item_model|add_class:"form-control" }}
                                    {% if f.errors %}
                                        <div class="text-danger small">{{ f.errors }}</div>
                                    {% endif %}
                                </td>

                                <td id="{{ f.instance.html_id_unit_cost }}">{{ f.po_unit_cost|add_class:"form-control" }}</td>
                                <td id="{{ f.instance.html_id_quantity }}">{{ f.po_quantity|add_class:"form-control" }}</td>
                                <td>{{ f.entity_unit|add_class:"form-control" }}</td>
                                <td class="text-end" id="{{ f.instance.html_id_total_amount }}">
                                    {% currency_symbol %}{{ f.instance.po_total_amount | currency_format }}</td>
                                <td>{{ f.po_item_status|add_class:"form-control" }}</td>
                                {% if itemtxs_formset.can_delete %}
                                    <td class="text-center">
                                        {{ f.DELETE|add_class:"form-check-input" }}
                                    </td>
                                {% endif %}
                                <td class="text-center">
                                    {% if f.instance.can_create_bill %}
                                        {{ f.create_bill|add_class:"form-check-input" }}
                                    {% elif f.instance.bill_model %}
                                        <a class="btn btn-sm btn-phoenix-secondary"
                                           href="{% url 'bill-detail' entity_slug=entity_slug bill_pk=f.instance.bill_model_id %}">
                                            {% trans 'View Bill' %}
                                        </a>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    {% if f.instance.bill_model %}
                                        {% if f.instance.bill_model.is_paid %}
                                            <span class="text-success">{% icon 'bi:check-circle-fill' 24 %}</span>
                                        {% else %}
                                            <span class="text-danger">{% icon 'clarity:no-access-solid' 24 %}</span>
                                        {% endif %}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>

                    <tfoot>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th class="text-end">{% trans 'Total' %}</th>
                            <th class="text-end">{% currency_symbol %}{{ po_model.po_amount | currency_format }}</th>
                            <th></th>
                            {% if itemtxs_formset.can_delete %}
                                <th></th>
                            {% endif %}
                            <th></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="col-12">
            <button class="btn btn-phoenix-success">{% trans 'Save' %}</button>
        </div>
    </div>
</form>