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

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

{% block sidebar %}
{% include "order/so_sidebar.html" %}
{% endblock sidebar %}

{% block page_content %}
{% settings_value "SALESORDER_EDIT_COMPLETED_ORDERS" as allow_extra_editing %}

<div class='panel panel-hidden' id='panel-order-items'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Sales Order Items" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.sales_order.add %}
                {% if order.is_open or allow_extra_editing %}
                <button type='button' class='btn btn-success' id='new-so-line'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Line Item" %}
                </button>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='order-toolbar-buttons'>
            {% include "filter_list.html" with id="sales-order-lines" %}
        </div>
        <table class='table table-striped table-condensed' id='so-lines-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.sales_order.change %}
                {% if order.is_open or allow_extra_editing %}
                <button type='button' class='btn btn-success' id='new-so-extra-line'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Extra Line" %}
                </button>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='order-extra-toolbar-buttons'>
            {% include "filter_list.html" with id="sales-order-extra-lines" %}
        </div>
        <table class='table table-striped table-condensed' id='so-extra-lines-table' data-toolbar='#order-extra-toolbar-buttons'>
        </table>
    </div>
</div>

{% if order.is_open %}
<div class='panel panel-hidden' id='panel-order-shipments'>
    <div class='panel-heading'>
        <div class='d-flex flex-row'>
            <h4>{% trans "Pending Shipments" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if 0 %}
                <button id='pending-shipment-options' title='{% trans "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'>

                </ul>
                {% endif %}
                {% if roles.sales_order.change %}
                <button type='button' class='btn btn-success' id='new-shipment'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Shipment" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% if roles.sales_order.change %}
        <div id='pending-shipment-toolbar'>
            {% include "filter_list.html" with id="pending-shipments" %}
        </div>
        {% endif %}
        <table class='table table-striped table-condensed' id='pending-shipments-table' data-toolbar='#pending-shipment-toolbar'></table>
    </div>
</div>
{% endif %}

<div class='panel panel-hidden' id='panel-order-shipments-complete'>
    <div class='panel-heading'>
        <h4>{% trans "Completed Shipments" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='completed-shipment-toolbar'>
            {% include "filter_list.html" with id="completed-shipments" %}
        </div>
        <table class='table table-striped table-condensed' id='completed-shipments-table' data-toolbar='#completed-shipment-toolbar'></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-order-builds'>
    <div class='panel-heading'>
        <h4>{% trans "Build Orders" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='builds-toolbar'>
            {% include "filter_list.html" with id='build' %}
        </div>
        <table class='table table-striped table-condensed' id='builds-table' data-toolbar='#builds-toolbar'></table>
    </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 page_content %}

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

    // Callback when the "shipments" panel is first loaded
    onPanelLoad('order-shipments', function() {

        {% if order.is_open %}
        loadSalesOrderShipmentTable('#pending-shipments-table', {
            order: {{ order.pk }},
            shipped: false,
            filter_target: '#filter-list-pending-shipments',
        });

        $('#new-shipment').click(function() {
            createSalesOrderShipment({
                order: {{ order.pk }},
                reference: '{{ order.reference }}',
                onSuccess: function(data) {
                    $('#pending-shipments-table').bootstrapTable('refresh');
                }
            });
        });

        {% endif %}

    });

    onPanelLoad('order-shipments-complete', function() {
        loadSalesOrderShipmentTable('#completed-shipments-table', {
            order: {{ order.pk }},
            shipped: true,
            filter_target: '#filter-list-completed-shipments',
        });
    });

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

    onPanelLoad('order-attachments', function() {

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

    loadBuildTable($("#builds-table"), {
        locale: '{{ request.LANGUAGE_CODE }}',
        params: {
            sales_order: {{ order.id }},
        },
    });

    onPanelLoad('order-items', function() {

        $("#new-so-line").click(function() {
            createSalesOrderLineItem({
                order: {{ order.pk }},
                onSuccess: function() {
                    $("#so-lines-table").bootstrapTable('refresh');
                }
            });

            // Create a new SalesOrderLine item
            var fields = soLineItemFields({
                order: {{ order.pk }},
            });
        });

        loadSalesOrderLineItemTable(
            '#so-lines-table',
            {
                order: {{ order.pk }},
                reference: '{{ order.reference }}',
                status: {{ order.status }},
                open: {% js_bool order.is_open %},
                {% if roles.sales_order.change %}
                {% settings_value "SALESORDER_EDIT_COMPLETED_ORDERS" as allow_edit %}
                {% if allow_edit or order.is_open %}
                allow_edit: true,
                {% endif %}
                {% if order.status == SalesOrderStatus.IN_PROGRESS %}
                allow_ship: true,
                {% endif %}
                {% endif %}
                {% if roles.sales_order.delete %}
                allow_delete: true,
                {% endif %}
            }
        );

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

            createExtraLineItem({
                order: {{ order.pk }},
                table: '#so-extra-lines-table',
                url: '{% url "api-so-extra-line-list" %}',
                currency: '{{ order.currency }}',
            });
        });

        loadExtraLineTable({
            order: {{ order.pk }},
            table: '#so-extra-lines-table',
            url: '{% url "api-so-extra-line-list" %}',
            name: 'salesorderextraline',
            filtertarget: '#filter-list-sales-order-extra-lines',
            {% settings_value "SALESORDER_EDIT_COMPLETED_ORDERS" as allow_edit %}
            {% if order.is_open or allow_edit %}
            allow_edit: {% js_bool roles.sales_order.change %},
            allow_delete: {% js_bool roles.sales_order.delete %},
            {% else %}
            allow_edit: false,
            allow_delete: false,
            {% endif %}
            pricing: true,
        });
    });

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

    enableSidebar('salesorder');

{% endblock js_ready %}
