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

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

<h4>Supplier Parts</h4>

<hr>

<div id='button-toolbar'>
    <button class="btn btn-success" id='part-create'>New Supplier Part</button>
    <div class="dropdown" style="float: right;">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href='#' id='multi-part-order' title='Order parts'>Order Parts</a></li>
        </ul>
    </div>
</div>

<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: {
                                supplier: {{ company.id }}
                            },
                            reload: true,
                            secondary: [
                                {
                                    field: 'part',
                                    label: 'New Part',
                                    title: 'Create New Part',
                                    url: "{% url 'part-create' %}"
                                },
                            ]
                        });
    });

    $("#part-table").bootstrapTable({
        sortable: true,
        search: true,
        pagination: true,
        pageSize: 50,
        formatNoMatches: function() { return "No supplier parts found for {{ company.name }}"; },
        queryParams: function(p) {
            return {
                supplier: {{ company.id }},
                part_detail: true,
            }
        },
        columns: [
            {
                checkbox: true,
            },
            {
                sortable: true,
                field: 'part_detail.full_name',
                title: 'Part',
                formatter: function(value, row, index, field) {
                    return imageHoverIcon(row.part_detail.image_url) + renderLink(value, '/part/' + row.part + '/suppliers/');
                }
            },
            {
                sortable: true,
                field: 'SKU',
                title: 'SKU',
                formatter: function(value, row, index, field) {
                    return renderLink(value, row.url);
                }
            },
            {
                sortable: true,
                field: 'manufacturer',
                title: 'Manufacturer',
            },
            {
                sortable: true,
                field: 'MPN',
                title: 'MPN',
            },
            {
                field: 'URL',
                title: 'URL',
                formatter: function(value, row, index, field) {
                    if (value) {
                        return renderLink(value, value);
                    } else {
                        return '';
                    }
                }
            },
        ],
        url: "{% url 'api-part-supplier-list' %}"
    });

    $("#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 %}