{% extends "company/company_base.html" %}
{% load static %}
{% load i18n %}

{% block sidebar %}
{% include 'company/sidebar.html' %}
{% endblock %}

{% block page_content %}

<div class='panel panel-hidden' id='panel-supplier-parts'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Supplier Parts" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.purchase_order.add %}
                    <button class="btn btn-success" id='supplier-part-create' title='{% trans "Create new supplier part" %}'>
                        <span class='fas fa-plus-circle'></span> {% trans "New Supplier Part" %}
                    </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% if roles.purchase_order.change %}
        <div id='supplier-part-button-toolbar'>
            <div class='button-toolbar container-fluid'>
                <div class='btn-group' role='group'>
                    <div class='btn-group'>
                        <button class="btn btn-primary dropdown-toggle" id='supplier-table-options' type="button" data-bs-toggle="dropdown">{% trans "Options" %}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            {% if roles.purchase_order.add %}
                            <li><a class='dropdown-item' href='#' id='multi-supplier-part-order' title='{% trans "Order parts" %}'>
                                <span class='fas fa-shopping-cart'></span> {% trans "Order Parts" %}
                            </a></li>
                            {% endif %}
                            {% if roles.purchase_order.delete %}
                            <li><a class='dropdown-item' href='#' id='multi-supplier-part-delete' title='{% trans "Delete parts" %}'>
                                <span class='fas fa-trash-alt icon-red'></span> {% trans "Delete Parts" %}
                            </a></li>
                            {% endif %}
                        </ul>
                    </div>
                    {% include "filter_list.html" with id="supplier-part" %}
                </div>
            </div>
        </div>
        {% endif %}

        <table class='table table-striped table-condensed' id='supplier-part-table' data-toolbar='#supplier-part-button-toolbar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-manufacturer-parts'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Manufacturer Parts" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.purchase_order.add %}
                    <button type="button" class="btn btn-success" id='manufacturer-part-create' title='{% trans "Create new manufacturer part" %}'>
                        <span class='fas fa-plus-circle'></span> {% trans "New Manufacturer Part" %}
                    </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% if roles.purchase_order.change %}
        <div id='manufacturer-part-button-toolbar'>
            <div class='button-toolbar container-fluid'>
                <div class='btn-group' role='group'>
                    <div class='btn-group' role='group'>
                        <button class="btn btn-primary dropdown-toggle" id='manufacturer-table-options' type="button" data-bs-toggle="dropdown">{% trans "Options" %}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            {% if roles.purchase_order.add %}
                            <li><a class='dropdown-item' href='#' id='multi-manufacturer-part-order' title='{% trans "Order parts" %}'>
                                <span class='fas fa-shopping-cart'></span> {% trans "Order Parts" %}
                            </a></li>
                            {% endif %}
                            {% if roles.purchase_order.delete %}
                            <li><a class='dropdown-item' href='#' id='multi-manufacturer-part-delete' title='{% trans "Delete parts" %}'>
                                <span class='fas fa-trash-alt icon-red'></span> {% trans "Delete Parts" %}
                            </a></li>
                            {% endif %}
                        </ul>
                    </div> 
                    {% include "filter_list.html" with id="manufacturer-part" %}
                </div>
            </div>
        </div>
        {% endif %}
        <table class='table table-striped table-condensed' id='manufacturer-part-table' data-toolbar='#manufacturer-part-button-toolbar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-company-stock'>
    <div class='panel-heading'>
        <h4>{% trans "Supplier Stock" %}</h4>
    </div>
    <div class='panel-content'>
        {% include "stock_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-purchase-orders'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Purchase Orders" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.purchase_order.add %}
                <button class='btn btn-success' type='button' id='company-order2' title='{% trans "Create new purchase order" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Purchase Order" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='po-button-bar'>
            <div class='button-toolbar container-fluid' style='float: right;'>
                {% include "filter_list.html" with id="purchaseorder" %}
            </div>
        </div>

        <table class='table table-striped table-condensed po-table' id='purchase-order-table' data-toolbar='#po-button-bar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-sales-orders'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Sales Orders" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.sales_order.add %}
                <button class='btn btn-success' type='button' id='new-sales-order' title='{% trans "Create new sales order" %}'>
                    <div class='fas fa-plus-circle'></div> {% trans "New Sales Order" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='so-button-bar'>
            <div class='button-toolbar container-fluid' style='float: right;'>
                {% include "filter_list.html" with id="salesorder" %}
            </div>
        </div>

        <table class='table table-striped table-condensed po-table' id='sales-order-table' data-toolbar='#so-button-bar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-assigned-stock'>
    <div class='panel-heading'>
        <h4>{% trans "Assigned Stock" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='assigned-stock-button-toolbar'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="customerstock" %}
            </div>
        </div>
        
        <table class='table table-striped table-condensed' id='assigned-stock-table' data-toolbar='#assigned-stock-button-toolbar'></table>
        
    </div>
</div>

<div class='panel panel-hidden' id='panel-company-notes'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Company Notes" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "notes_buttons.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <textarea id='company-notes'></textarea>
    </div>
</div>

{% endblock %}

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

    onPanelLoad('company-notes', function() {

        setupNotesField(
            'company-notes',
            '{% url "api-company-detail" company.pk %}',
            {
                editable: true,
            }
        )
    });

    loadStockTable($("#assigned-stock-table"), {
        params: {
            customer: {{ company.id }},
            part_detail: true,
            location_detail: true,
        },
        url: "{% url 'api-stock-list' %}",
        filterKey: "customerstock",
        filterTarget: '#filter-list-customerstock',
    });

    onPanelLoad('company-stock', function() {

        loadStockTable($('#stock-table'), {
            url: "{% url 'api-stock-list' %}",
            params: {
                company: {{ company.id }},
                part_detail: true,
                supplier_part_detail: true,
                location_detail: true,
            },
            buttons: [
                '#stock-options',
            ],
            filterKey: "companystock",
        });
    });

    {% if company.is_customer %}
    onPanelLoad('sales-orders', function() {
        loadSalesOrderTable("#sales-order-table", {
            url: "{% url 'api-so-list' %}",
            params: {
                customer: {{ company.id }},
            }
        });

        $("#new-sales-order").click(function() {

            createSalesOrder({
                customer: {{ company.pk }},
            });
        });
    });
    {% endif %}

    {% if company.is_supplier %}
    loadPurchaseOrderTable("#purchase-order-table", {
        url: "{% url 'api-po-list' %}",
        params: {
            supplier: {{ company.id }},
        }
    });

    function newOrder() {
        createPurchaseOrder({
            supplier: {{ company.pk }},
        });
    }

    $("#company-order").click(function() {
        newOrder();
    });

    $("#company-order2").click(function() {
        newOrder();
    });

    {% endif %}

    {% if company.is_manufacturer %}

    function reloadManufacturerPartTable() {
        $('#manufacturer-part-table').bootstrapTable('refresh');
    }

    $("#manufacturer-part-create").click(function () {

        createManufacturerPart({
            manufacturer: {{ company.pk }},
            onSuccess: function() {
                $("#part-table").bootstrapTable("refresh");
            }
        });
    });

    loadManufacturerPartTable(
        "#manufacturer-part-table",
        "{% url 'api-manufacturer-part-list' %}",
        {
            params: {
                part_detail: true,
                manufacturer_detail: true,
                manufacturer: {{ company.id }},
            },
        }
    );

    linkButtonsToSelection($("#manufacturer-part-table"), ['#manufacturer-table-options']);

    $("#multi-manufacturer-part-delete").click(function() {
        var selections = $("#manufacturer-part-table").bootstrapTable("getSelections");

        deleteManufacturerParts(selections, {
            onSuccess: function() { 
                $("#manufacturer-part-table").bootstrapTable("refresh");
            }
        });
    });

    $("#multi-manufacturer-part-order").click(function() {
        var selections = $("#manufacturer-part-table").bootstrapTable("getSelections");

        var parts = [];

        selections.forEach(function(item) {
            var part = item.part_detail;
            part.manufacturer_part = item.pk;
            parts.push(part);
        });

        orderParts(
            parts,
        );
    });

    {% endif %}

    {% if company.is_supplier %}

    function reloadSupplierPartTable() {
        $('#supplier-part-table').bootstrapTable('refresh');
    }

    $("#supplier-part-create").click(function () {

        createSupplierPart({
            supplier: {{ company.pk }},
            onSuccess: reloadSupplierPartTable,
        });
    });

    loadSupplierPartTable(
        "#supplier-part-table",
        "{% url 'api-supplier-part-list' %}",
        {
            params: {
                part_detail: true,
                supplier_detail: true,
                manufacturer_detail: true,
                supplier: {{ company.id }},
            },
        }
    );

    linkButtonsToSelection($("#supplier-part-table"), ['#supplier-table-options']);

    $("#multi-supplier-part-delete").click(function() {
        var selections = $("#supplier-part-table").bootstrapTable("getSelections");

        var requests = [];

        showQuestionDialog(
            '{% trans "Delete Supplier Parts?" %}',
            '{% trans "All selected supplier parts will be deleted" %}',
            {
                accept: function() {
                    selections.forEach(function(part) {
                        var url = `/api/company/part/${part.pk}/`;
            
                        requests.push(inventreeDelete(url));
                    });
            
                    $.when.apply($, requests).done(function() {
                        $('#supplier-part-table').bootstrapTable('refresh');
                    });
                }
            }
        );
    });

    $("#multi-supplier-part-order").click(function() {
        var selections = $("#supplier-part-table").bootstrapTable("getSelections");

        var parts = [];

        selections.forEach(function(item) {
            var part = item.part_detail;
            parts.push(part);
        });

        orderParts(
            parts,
            {
                supplier: {{ company.pk }},
            }
        );
    });

    {% endif %}

    enableSidebar('company');

{% endblock %}