{% extends "page_base.html" %}

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

{% block page_title %}
{% inventree_title %} | {% trans "Purchase Order" %}
{% endblock %}

{% block breadcrumbs %}
<li class='breadcrumb-item'><a href='{% url "po-index" %}'>{% trans "Purchase Orders" %}</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href='{% url "po-detail" order.id %}'>{{ order }}</a></li>
{% endblock %}

{% block heading %}
{% trans "Purchase Order" %}: {{ order.reference }}
{% endblock %}

{% block actions %}
{% if user.is_staff and roles.purchase_order.change %}
{% url 'admin:order_purchaseorder_change' order.pk as url %}
{% include "admin_button.html" with url=url %}
{% endif %}
<!-- Printing options -->
<div class='btn-group' role='group'>
    <button id='print-options' title='{% trans "Print actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
        <span class='fas fa-print'></span> <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' role='menu'>
        {% if report_enabled %}
        <li><a class='dropdown-item' href='#' id='print-order-report'><span class='fas fa-file-pdf'></span> {% trans "Print purchase order report" %}</a></li>
        {% endif %}
        <li><a class='dropdown-item' href='#' id='export-order'><span class='fas fa-file-download'></span> {% trans "Export order to file" %}</a></li>
    </ul>
</div>
{% if roles.purchase_order.change %}
<!-- order actions -->
<div class='btn-group'>
    <button id='order-options' title='{% trans "Order actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
        <span class='fas fa-tools'></span> <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' role='menu'>
        <li><a class='dropdown-item' href='#' id='edit-order'><span class='fas fa-edit icon-green'></span> {% trans "Edit order" %}</a></li>
        {% if order.can_cancel %}
        <li><a class='dropdown-item' href='#' id='cancel-order'><span class='fas fa-times-circle icon-red'></span> {% trans "Cancel order" %}</a></li>
        {% endif %}
    </ul>
</div>
{% if order.status == PurchaseOrderStatus.PENDING %}
<button type='button' class='btn btn-outline-secondary' id='place-order' title='{% trans "Place order" %}'>
    <span class='fas fa-paper-plane icon-blue'></span>
</button>
{% elif order.status == PurchaseOrderStatus.PLACED %}
<button type='button' class='btn btn-primary' id='receive-order' title='{% trans "Receive items" %}'>
    <span class='fas fa-sign-in-alt'></span>
    {% trans "Receive Items" %}
</button>
<button type='button' class='btn btn-success' id='complete-order' title='{% trans "Mark order as complete" %}'>
    <span class='fas fa-check-circle'></span>
    {% trans "Complete Order" %}
</button>
{% endif %}
{% endif %}
{% endblock actions %}

{% block thumbnail %}
<img class='part-thumb'
{% if order.supplier and order.supplier.image %}
src="{{ order.supplier.image.url }}"
{% else %}
src="{% static 'img/blank_image.png' %}"
{% endif %}
/>
{% endblock %}

{% block details %}

<table class='table table-striped table-condensed'>
    <col width='25'>
    <tr>
        <td><span class='fas fa-hashtag'></span></td>
        <td>{% trans "Order Reference" %}</td>
        <td>{% settings_value 'PURCHASEORDER_REFERENCE_PREFIX' %}{{ order.reference }}{% include "clip.html"%}</td>
    </tr>
    <tr>
        <td><span class='fas fa-info-circle'></span></td>
        <td>{% trans "Order Description" %}</td>
        <td>{{ order.description }}{% include "clip.html" %}</td>
    </tr>
    <tr>
        <td><span class='fas fa-info'></span></td>
        <td>{% trans "Order Status" %}</td>
        <td>
            {% purchase_order_status_label order.status %}
            {% if order.is_overdue %}
            <span class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
            {% endif %}
        </td>
    </tr>

</table>

{% endblock %}

{% block details_right %}
<table class='table table-condensed table-striped'>
    <col width='25'>
    <tr>
        <td><span class='fas fa-building'></span></td>
        <td>{% trans "Supplier" %}</td>
        <td>
            {% if order.supplier %}
            <a href="{% url 'company-detail' order.supplier.id %}">{{ order.supplier.name }}</a>{% include "clip.html"%}
            {% else %}
            <em>{% trans "No suppplier information available" %}</em>
            {% endif %}
        </td>
    </tr>
    {% if order.supplier_reference %}
    <tr>
        <td><span class='fas fa-hashtag'></span></td>
        <td>{% trans "Supplier Reference" %}</td>
        <td>{{ order.supplier_reference }}{% include "clip.html"%}</td>
    </tr>
    {% endif %}
    <tr>
        <td><span class='fas fa-tasks'></span></td>
        <td>{% trans "Completed Line Items" %}</td>
        <td>
            {{ order.completed_line_count }} / {{ order.line_count }}
            {% if order.is_complete %}
            <span class='badge bg-success badge-right rounded-pill'>{% trans "Complete" %}</span>
            {% else %}
            <span class='badge bg-danger badge-right rounded-pill'>{% trans "Incomplete" %}</span>
            {% endif %}
        </td>
    </tr>
    {% if order.link %}
    <tr>
        <td><span class='fas fa-link'></span></td>
        <td>External Link</td>
        <td><a href="{{ order.link }}">{{ order.link }}</a>{% include "clip.html"%}</td>
    </tr>
    {% endif %}
    <tr>
        <td><span class='fas fa-calendar-alt'></span></td>
        <td>{% trans "Created" %}</td>
        <td>{% render_date order.creation_date %}<span class='badge badge-right rounded-pill bg-dark'>{{ order.created_by }}</span></td>
    </tr>
    {% if order.issue_date %}
    <tr>
        <td><span class='fas fa-calendar-alt'></span></td>
        <td>{% trans "Issued" %}</td>
        <td>{% render_date order.issue_date %}</td>
    </tr>
    {% endif %}
    {% if order.target_date %}
    <tr>
        <td><span class='fas fa-calendar-alt'></span></td>
        <td>{% trans "Target Date" %}</td>
        <td>{% render_date order.target_date %}</td>
    </tr>
    {% endif %}
    {% if order.status == PurchaseOrderStatus.COMPLETE %}
    <tr>
        <td><span class='fas fa-calendar-alt'></span></td>
        <td>{% trans "Received" %}</td>
        <td>{% render_date order.complete_date %}<span class='badge badge-right rounded-pill bg-dark'>{{ order.received_by }}</span></td>
    </tr>
    {% endif %}
    {% if order.responsible %}
    <tr>
        <td><span class='fas fa-users'></span></td>
        <td>{% trans "Responsible" %}</td>
        <td>{{ order.responsible }}</td>
    </tr>
    {% endif %}

    <tr>
        <td><span class='fas fa-dollar-sign'></span></td>
        <td>{% trans "Total cost" %}</td>
        <td id="poTotalPrice">{{ order.get_total_price }}</td>
    </tr>
</table>
{% endblock %}

{% block js_ready %}
{{ block.super }}


{% if order.status == PurchaseOrderStatus.PENDING %}
$("#place-order").click(function() {

    issuePurchaseOrder(
        {{ order.pk }},
        {
            reload: true,
        }
    );

});
{% endif %}

{% if report_enabled %}
$('#print-order-report').click(function() {
    printPurchaseOrderReports([{{ order.pk }}]);
});
{% endif %}

$("#edit-order").click(function() {

    constructForm('{% url "api-po-detail" order.pk %}', {
        fields: {
            reference: {
                prefix: global_settings.PURCHASEORDER_REFERENCE_PREFIX,
            },
            {% if order.lines.count == 0 and order.status == PurchaseOrderStatus.PENDING %}
            supplier: {
            },
            {% endif %}
            supplier_reference: {},
            description: {},
            target_date: {
                icon: 'fa-calendar-alt',
            },
            link: {
                icon: 'fa-link',
            },
            responsible: {
                icon: 'fa-user',
            },
        },
        title: '{% trans "Edit Purchase Order" %}',
        reload: true,
    });
});

$("#receive-order").click(function() {

    // Auto select items which have not been fully allocated
    var items = $("#po-line-table").bootstrapTable('getData');

    var items_to_receive = [];

    items.forEach(function(item) {
        if (item.received < item.quantity) {
            items_to_receive.push(item);
        }
    });

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

$("#complete-order").click(function() {

    completePurchaseOrder(
        {{ order.pk }},
        {
            onSuccess: function() {
                window.location.reload();
            }
        }
    );
});

$("#cancel-order").click(function() {

    cancelPurchaseOrder(
        {{ order.pk }},
        {
            onSuccess: function() {
                window.location.reload();
            }
        },
    );
});

$("#export-order").click(function() {
    exportOrder('{% url "po-export" order.id %}');
});


{% endblock %}