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

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

{% block sidebar %}
{% include "order/so_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 "Sales Order Items" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.sales_order.change and order.is_pending %}
                <button type='button' class='btn btn-success' id='new-so-line'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Line Item" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='order-toolbar-buttons' class='btn-group' style='float: right;'>
            <div class='btn-group'>
                {% include "filter_list.html" with id="sales-order-lines" %}
            </div>
        </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 and order.is_pending %}
                <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 %}
            </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="sales-order-extra-lines" %}
            </div>
        </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_pending %}
<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' class='btn-group' style='float: right;'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="pending-shipments" %}
            </div>
        </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' class='btn-group' style='float: right;'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="completed-shipments" %}
            </div>
        </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' class='btn-group' style='float: right;'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id='build' %}
            </div>
        </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 %}

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

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

        {% if order.is_pending %}
        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 %}
            }
        );
    });

    enableDragAndDrop(
        '#attachment-dropzone',
        '{% url "api-so-attachment-list" %}',
        {
            data: {
                order: {{ order.id }},
            },
            label: 'attachment',
            success: function(data, status, xhr) {
                reloadAttachmentTable();
            }
        }
    );

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

    loadBuildTable($("#builds-table"), {
        url: "{% url 'api-build-list' %}",
        params: {
            sales_order: {{ order.id }},
        },
    });

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

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

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

    loadSalesOrderLineItemTable(
        '#so-lines-table',
        {
            order: {{ order.pk }},
            status: {{ order.status }},
        }
    );

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

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

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

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

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

    enableSidebar('salesorder');
    
{% endblock %}