{% extends "order/order_base.html" %}

{% load inventree_extras %}
{% load status_codes %}
{% load i18n %}
{% load static %}

{% block sidebar %}
{% include 'order/po_sidebar.html' %}
{% endblock %}

{% block page_content %}

<div class='panel panel-hidden' id='panel-order-items'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Purchase Order Items" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.purchase_order.change %}
                {% if order.status == PurchaseOrderStatus.PENDING %}
                <a class='btn btn-primary' href='{% url "po-upload" order.id %}' role='button'>
                    <span class='fas fa-file-upload side-icon'></span> {% trans "Upload File" %}
                </a>
                <button type='button' class='btn btn-success' id='new-po-line'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Line Item" %}
                </button>
                {% elif order.status == PurchaseOrderStatus.PLACED %}
                <button type='button' class='btn btn-primary' id='receive-selected-items' title='{% trans "Receive selected items" %}'>
                    <span class='fas fa-sign-in-alt'></span> {% trans "Receive Items" %}
                </button>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='order-toolbar-buttons' class='btn-group' style='float: right;'>
            {% include "filter_list.html" with id="purchase-order-lines" %}
        </div>

        <table class='table table-striped table-condensed' id='po-line-table' data-toolbar='#order-toolbar-buttons'>
        </table>
    </div>

    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Extra Lines" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.purchase_order.change and order.status == PurchaseOrderStatus.PENDING %}
                <button type='button' class='btn btn-success' id='new-po-extra-line'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Extra Line" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='order-extra-toolbar-buttons' class='btn-group' style='float: right;'>
            <div class='btn-group'>
                {% include "filter_list.html" with id="purchase-order-extra-lines" %}
            </div>
        </div>
        <table class='table table-striped table-condensed' id='po-extra-lines-table' data-toolbar='#order-extra-toolbar-buttons'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-received-items'>
    <div class='panel-heading'>
        <h4>{% trans "Received Items" %}</h4>
    </div>
    <div class='panel-content'>
        {% include "stock_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-order-attachments'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Attachments" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "attachment_button.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "attachment_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-order-notes'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Order Notes" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "notes_buttons.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <textarea id='order-notes'></textarea>
    </div>
</div>

{% endblock %}

{% block js_ready %}

{{ block.super }}

    onPanelLoad('order-notes', function() {
        setupNotesField(
            'order-notes',
            '{% url "api-po-detail" order.pk %}',
            {
                {% if roles.purchase_order.change %}
                editable: true,
                {% else %}
                editable: false,
                {% endif %}
            }
        );
    });

    enableDragAndDrop(
        '#attachment-dropzone',
        '{% url "api-po-attachment-list" %}',
        {
            data: {
                order: {{ order.id }},
            },
            label: 'attachment',
            success: function(data, status, xhr) {
                $('#attachment-table').bootstrapTable('refresh');
            }
        }
    );

    loadAttachmentTable('{% url "api-po-attachment-list" %}', {
        filters: {
            order: {{ order.pk }},
        },
        fields: {
            order: {
                value: {{ order.pk }},
                hidden: true,
            }
        }
    });

    loadStockTable($("#stock-table"), {
        params: {
            purchase_order: {{ order.id }},
            part_detail: true,
            supplier_part_detail: true,
            location_detail: true,
        },
        buttons: [
            '#stock-options',
        ],
        filterkey: "postock"
    });

{% if order.status == PurchaseOrderStatus.PENDING %}
$('#new-po-line').click(function() {

    createPurchaseOrderLineItem({{ order.pk }}, {
        {% if order.supplier %}
        supplier: {{ order.supplier.pk }},
        {% if order.supplier.currency %}
        currency: '{{ order.supplier.currency }}',
        {% endif %}
        {% endif %}
        onSuccess: function() {
            $('#po-line-table').bootstrapTable('refresh');
        }
    });
});

{% elif order.status == PurchaseOrderStatus.PLACED %}

    $('#receive-selected-items').click(function() {
        var items = getTableData('#po-line-table');

        receivePurchaseOrderItems(
            {{ order.id }},
            items,
            {
                success: function() {
                    $("#po-line-table").bootstrapTable('refresh');
                }
            }
        );
    });

{% endif %}

loadPurchaseOrderLineItemTable('#po-line-table', {
    order: {{ order.pk }},
    {% if order.supplier %}
    supplier: {{ order.supplier.pk }},
    {% endif %}
    {% if roles.purchase_order.change %}
    allow_edit: true,
    {% else %}
    allow_edit: false,
    {% endif %}
    {% if order.status == PurchaseOrderStatus.PLACED and roles.purchase_order.change %}
    allow_receive: true,
    {% else %}
    allow_receive: false,
    {% endif %}
});

$("#new-po-extra-line").click(function() {

    var fields = extraLineFields({
        order: {{ order.pk }},
    });

    constructForm('{% url "api-po-extra-line-list" %}', {
        fields: fields,
        method: 'POST',
        title: '{% trans "Add Order Line" %}',
        onSuccess: function() {
            $("#po-extra-lines-table").bootstrapTable("refresh");
        },
    });
});

loadPurchaseOrderExtraLineTable(
    '#po-extra-lines-table',
    {
        order: {{ order.pk }},
        status: {{ order.status }},
    }
);

loadOrderTotal(
    '#poTotalPrice',
    {
        url: '{% url "api-po-detail" order.pk %}',
    }
);

enableSidebar('purchaseorder');

{% endblock %}
