{% extends "base.html" %}

{% load static %}

{% block page_title %}
InvenTree | {{ order }}
{% endblock %}

{% block content %}
<div class='row'>
    <div class='col-sm-6'>
        <div class='media'>
            <div class='media-left'>
                <img class='part-thumb'
                {% if order.supplier.image %}
                src="{{ order.supplier.image.url }}"
                {% else %}
                src="{% static 'img/blank_image.png' %}"
                {% endif %}
                />
            </div>
            <div class='media-body'>
                <h4>{{ order }}</h4>
                <p>{{ order.description }}</p>
                {% if order.URL %}
                <a href="{{ order.URL }}">{{ order.URL }}</a>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='col-sm-6'>
        <h4>Purchase Order Details</h4>
        <table class='table'>
            <tr>
                <td>Supplier</td>
                <td><a href="{% url 'company-detail' order.supplier.id %}">{{ order.supplier }}</a></td>
            </tr>
            <tr>
                <td>Status</td>
                <td>{% include "order/order_status.html" %}</td>
            </tr>
            <tr>
                <td>Created</td>
                <td>{{ order.creation_date }}<span class='badge'>{{ order.created_by }}</span></td>
            </tr>
            {% if order.issue_date %}
            <tr>
                <td>Issued</td>
                <td>{{ order.issue_date }}</td>
            </tr>
            {% endif %}
            {% if order.status == OrderStatus.COMPLETE %}
            <tr>
                <td>Received</td>
                <td>{{ order.complete_date }}<span class='badge'>{{ order.received_by }}</span></td>
            </tr>
            {% endif %}
        </table>
    </div>
</div>

<hr>

<div id='order-toolbar-buttons' class='btn-group' style='float: right;'>
    {% if order.status == OrderStatus.PENDING %}
    <button type='button' class='btn btn-default' id='new-po-line'>Add Line Item</button>
    {% endif %}
    <button type='button' class='btn btn-primary' id='edit-order'>Edit Order</button>
    {% if order.status == OrderStatus.PENDING and order.lines.count > 0 %}
    <button type='button' class='btn btn-primary' id='place-order'>Place Order</button>
    {% elif order.status == OrderStatus.PLACED %}
    <button type='button' class='btn btn-primary' id='receive-order'>Receive Items</button>
    {% endif %}
    <button type='button' class='btn btn-primary' id='export-order' title='Export order to file'>Export</button>
</div>

<h4>Order Items</h4>

<table class='table table-striped table-condensed' id='po-lines-table' data-toolbar='#order-toolbar-buttons'>
    <thead>
    <tr>
        <th data-sortable='true'>Line</th>
        <th data-sortable='true'>Part</th>
        <th>Description</th>
        <th data-sortable='true'>Order Code</th>
        <th data-sortable='true'>Reference</th>
        <th data-sortable='true'>Quantity</th>
        {% if not order.status == OrderStatus.PENDING %}
        <th data-sortable='true'>Received</th>
        {% endif %}
        <th>Note</th>
        {% if order.status == OrderStatus.PENDING %}
        <th></th>
        {% endif %}
    </tr>
    </thead>
    <tbody>
    {% for line in order.lines.all %}
    <tr>
        <td>
            {{ forloop.counter }}
        </td>
        {% if line.part %}
        <td>
            {% include "hover_image.html" with image=line.part.part.image hover=True %}
            <a href="{% url 'part-detail' line.part.part.id %}">{{ line.part.part.full_name }}</a>
        </td>
        <td>{{ line.part.part.description }}</td>
        <td><a href="{% url 'supplier-part-detail' line.part.id %}">{{ line.part.SKU }}</a></td>
        {% else %}
        <td colspan='3'><strong>Warning: Part has been deleted.</strong></td>
        {% endif %}
        <td>{{ line.reference }}</td>
        <td>{{ line.quantity }}</td>
        {% if not order.status == OrderStatus.PENDING %}
        <td>{{ line.received }}</td>
        {% endif %}
        <td>
            {{ line.notes }}
        </td>
        {% if order.status == OrderStatus.PENDING %}
        <td>
            <div class='btn-group'>
                <button class='btn btn-default btn-glyph' line='{{ line.id }}' id='edit-line-item-{{ line.id }} title='Edit line item' onclick='editPurchaseOrderLineItem()'>
                    <span url="{% url 'po-line-item-edit' line.id %}" line='{{ line.id }}' class='glyphicon glyphicon-edit'></span>
                </button>
                <button class='btn btn-default btn-glyph' line='{{ line.id }}' id='remove-line-item-{{ line.id }' title='Remove line item' type='button' onclick='removePurchaseOrderLineItem()'>
                    <span url="{% url 'po-line-item-delete' line.id %}" line='{{ line.id }}' class='glyphicon glyphicon-remove'></span>
                </button>
            </div>
        </td>
        {% endif %}
    </tr>
    {% endfor %}
    </tbody>
</table>

{% if order.notes %}
<hr>
<div class='panel panel-default'>
    <div class='panel-heading'><b>Notes</b></div>
    <div class='panel-body'>{{ order.notes }}</div>
</div>
{% endif %}

{% endblock %}

{% block js_ready %}

$("#place-order").click(function() {
    launchModalForm("{% url 'purchase-order-issue' order.id %}",
    {
        reload: true,
    });
});

$("#edit-order").click(function() {
    launchModalForm("{% url 'purchase-order-edit' order.id %}",
        {
            reload: true,
        }
    );
});

$("#receive-order").click(function() {
    launchModalForm("{% url 'purchase-order-receive' order.id %}", {
        reload: true,
    });
});

$("#export-order").click(function() {
    location.href = "{% url 'purchase-order-export' order.id %}";
});

{% if order.status == OrderStatus.PENDING %}
$('#new-po-line').click(function() {
    launchModalForm("{% url 'po-line-item-create' %}",
        {
            reload: true,
            data: {
                order: {{ order.id }},
            },
            secondary: [
                {
                    field: 'part',
                    label: 'New Supplier Part',
                    title: 'Create new supplier part',
                    url: "{% url 'supplier-part-create' %}",
                    data: {
                        supplier: {{ order.supplier.id }},
                    },
                },
            ],
        }
    );
});
{% endif %}

$("#po-lines-table").bootstrapTable({
    search: true,
    sortable: true,
});


{% endblock %}