{% extends "page_base.html" %}

{% load i18n %}
{% load static %}
{% load inventree_extras %}
{% load generic %}

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

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

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

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

{% block actions %}
{% if user.is_staff and roles.sales_order.change %}
{% url 'admin:order_salesorder_change' order.pk as url %}
{% include "admin_button.html" with url=url %}
{% endif %}
{% if barcodes %}
<!-- Barcode actions menu -->
<div class='btn-group' role='group'>
    <button id='barcode-options' title='{% trans "Barcode actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
        <span class='fas fa-qrcode'></span> <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' role='menu'>
        <li><a class='dropdown-item' href='#' id='show-qr-code'><span class='fas fa-qrcode'></span> {% trans "Show QR Code" %}</a></li>
        {% if roles.sales_order.change %}
        {% if order.barcode_hash %}
        <li><a class='dropdown-item' href='#' id='barcode-unlink'><span class='fas fa-unlink'></span> {% trans "Unlink Barcode" %}</a></li>
        {% else %}
        <li><a class='dropdown-item' href='#' id='barcode-link'><span class='fas fa-link'></span> {% trans "Link Barcode" %}</a></li>
        {% endif %}
        {% endif %}
    </ul>
</div>
{% endif %}
<!-- Printing actions -->
<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 sales 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>
        <!--
        <li><a class='dropdown-item' href='#' id='print-packing-list'><span class='fas fa-clipboard-list'></span>{% trans "Print packing list" %}</a></li>
        -->
    </ul>
</div>
{% if roles.sales_order.change %}
<!-- Order actions -->
<div class='btn-group' role='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.is_open %}
        <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>
<div class='btn-group' role='group'>
    {% if order.is_pending %}
    <button type='button' class='btn btn-primary' id='issue-order' title='{% trans "Issue Order" %}'>
        <span class='fas fa-paper-plane'></span> {% trans "Issue Order" %}
    </button>
    {% elif order.status == SalesOrderStatus.IN_PROGRESS %}
    {% if not order.is_completed %}
    <button type='button' class='btn btn-success' id='complete-order-shipments' title='{% trans "Ship Items" %}'>
        <span class='fas fa-truck'></span> {% trans "Ship Items" %}
    </button>
    {% endif %}
    <button type='button' class='btn btn-success' id='complete-order' title='{% trans "Complete Sales Order" %}'>
        <span class='fas fa-check-circle'></span> {% trans "Complete Order" %}
    </button>
    {% endif %}
</div>
{% endif %}
{% endblock actions %}

{% 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>{{ 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>
    {% include "project_code_data.html" with instance=order %}
    {% include "barcode_data.html" with instance=order %}
    <tr>
        <td><span class='fas fa-info'></span></td>
        <td>{% trans "Order Status" %}</td>
        <td>
            {% status_label 'sales_order' order.status %}
            {% if order.is_overdue %}
            <span class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
            {% endif %}
        </td>
    </tr>
</table>

<div class='info-messages'>
    {% if order.status == SalesOrderStatus.PENDING and not order.is_fully_allocated %}
    <div class='alert alert-block alert-danger'>
        {% trans "This Sales Order has not been fully allocated" %}
    </div>
    {% endif %}
</div>

{% endblock details %}

{% block details_right %}
<table class='table table-striped table-condensed'>
    <col width='25'>
    {% if order.customer %}
    <tr>
        <td><span class='fas fa-building'></span></td>
        <td>{% trans "Customer" %}</td>
        <td><a href="{% url 'company-detail' order.customer.id %}">{{ order.customer.name }}</a>{% include "clip.html" %}</td>
    </tr>
    {% endif %}
    {% if order.customer_reference %}
    <tr>
        <td><span class='fas fa-hashtag'></span></td>
        <td>{% trans "Customer Reference" %}</td>
        <td>{{ order.customer_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_completed %}
            <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>
    <tr>
        <td><span class='fas fa-truck'></span></td>
        <td>{% trans "Completed Shipments" %}</td>
        <td>
            {{ order.completed_shipment_count }} / {{ order.shipment_count }}
            {% if order.pending_shipment_count > 0 %}
            <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>{% trans "External Link" %}</td>
        <td>{% include 'clip_link.html' with link=order.link %}</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.target_date %}
    <tr>
        <td><span class='fas fa-calendar-alt'></span></td>
        <td>{% trans "Target Date" %}</td>
        <td>
            {% render_date order.target_date %}
            {% if order.is_overdue %}<span class='fas fa-calendar-times icon-red float-right'></span>{% endif %}
        </td>
    </tr>
    {% endif %}
    {% if order.shipment_date %}
    <tr>
        <td><span class='fas fa-truck'></span></td>
        <td>{% trans "Completed" %}</td>
        <td>
            {% render_date order.shipment_date %}
            {% if order.shipped_by %}
            <span class='badge badge-right rounded-pill bg-dark'>{{ order.shipped_by }}</span>
            {% endif %}
        </td>
    </tr>
    {% endif %}
    {% if order.contact %}
    <tr>
        <td><span class='fas fa-user-tie'></span></td>
        <td>{% trans "Contact" %}</td>
        <td>{{ order.contact.name }}</td>
    </tr>
    {% endif %}
    {% if order.address %}
    <tr>
        <td><span class='fas fa-map'></span></td>
        <td>{% trans "Address" %}</td>
        <td><b>{{ order.address.title }}</b>: {{ order.address }}</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 %}
    {% include "currency_data.html" with instance=order %}
    <tr>
        <td><span class='fas fa-dollar-sign'></span></td>
        <td>{% trans "Total Cost" %}</td>
        <td id="soTotalPrice">
            {% with order.total_price as tp %}
            {% if tp == None %}
            <span class='badge bg-warning'>{% trans "Total cost could not be calculated" %}</span>
            {% else %}
            {% render_currency tp currency=order.currency %}
            {% endif %}
            {% endwith %}
        </td>
    </tr>
</table>
{% endblock details_right %}

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

{% if roles.sales_order.change %}
$("#edit-order").click(function() {
    editSalesOrder({{ order.pk }}, {
        reload: true,
    });
});
{% endif %}

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

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

$('#issue-order').click(function() {
    issueSalesOrder(
        {{ order.pk }},
        {
            reload: true
        }
    );
});

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

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

$("#complete-order").click(function() {
    completeSalesOrder(
        {{ order.pk }},
        {
            reload: true,
        }
    );
});

{% if report_enabled %}
$('#print-order-report').click(function() {
    printReports({
        items: [{{ order.pk }}],
        key: 'order',
        url: '{% url "api-so-report-list" %}',
    });
});
{% endif %}

{% if barcodes %}
<!-- Barcode functionality callbacks -->
$('#show-qr-code').click(function() {
    showQRDialog(
        '{% trans "Sales Order QR Code" %}',
        '{"salesorder": {{ order.pk }} }'
    );
});

{% if roles.sales_order.change %}
$("#barcode-link").click(function() {
    linkBarcodeDialog(
        {
            salesorder: {{ order.pk }},
        },
        {
            title: '{% trans "Link Barcode to Sales Order" %}',
        }
    );
});

$("#barcode-unlink").click(function() {
    unlinkBarcode({
        salesorder: {{ order.pk }},
    });
});
{% endif %}
{% endif %}

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

{% endblock js_ready %}
