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

{% include 'company/tabs.html' with tab='parts' %}

<h4>{% trans "Supplier Parts" %}</h4>

<hr>

{% if roles.purchase_order.change %}
<div id='button-toolbar'>
    <div class='button-toolbar container-fluid'>
        <div class='btn-group role='group'>
            {% if roles.purchase_order.add %}
            <button class="btn btn-success" id='part-create' title='{% trans "Create new supplier part" %}'>
                <span class='fas fa-plus-circle'></span> {% trans "New Supplier Part" %}
            </button>
            {% endif %}
            <div class='btn-group'>
                <div class="dropdown" style="float: right;">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{% trans "Options" %}
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        {% if roles.purchase_order.add %}
                        <li><a href='#' id='multi-part-order' title='{% trans "Order parts" %}'>{% trans "Order Parts" %}</a></li>
                        {% endif %}
                        {% if roles.purchase_order.delete %}
                        <li><a href='#' id='multi-part-delete' title='{% trans "Delete parts" %}'>{% trans "Delete Parts" %}</a></li>
                        {% endif %}
                    </ul>
                </div>  
            </div>
        </div>
        <div class='filter-list' id='filter-list-supplier-part'>
            <!-- Empty div (will be filled out with available BOM filters) -->
        </div>
    </div>
</div>
{% endif %}

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

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

    $("#part-create").click(function () {
        launchModalForm(
            "{% url 'supplier-part-create' %}",
            {
                data: {
                    {% if company.is_supplier %}supplier: {{ company.id }},{% endif %}
                    {% if company.is_manufacturer %}manufacturer: {{ company.id }},{% endif %}
                },
                reload: true,
                secondary: [
                    {
                        field: 'part',
                        label: '{% trans "New Part" %}',
                        title: '{% trans "Create new Part" %}',
                        url: "{% url 'part-create' %}"
                    },
                    {
                        field: 'supplier',
                        label: "{% trans 'New Supplier' %}",
                        title: "{% trans 'Create new Supplier' %}",
                        url: "{% url 'supplier-create' %}",
                    },
                    {
                        field: 'manufacturer',
                        label: '{% trans "New Manufacturer" %}',
                        title: '{% trans "Create new Manufacturer" %}',
                        url: "{% url 'manufacturer-create' %}",
                    },
                ]
            });
    });

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

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

        var parts = [];

        selections.forEach(function(item) {
            parts.push(item.pk);
        });

        launchModalForm("{% url 'supplier-part-delete' %}", {
            data: {
                parts: parts,
            },
            reload: true,
        });
    });

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

        var parts = [];

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

        launchModalForm("/order/purchase-order/order-parts/", {
            data: {
                parts: parts,
            },
        });
    });

{% endblock %}