{% extends "page_base.html" %}
{% load static %}
{% load i18n %}

{% block page_title %}
InvenTree | {% trans "Manufacturer Part" %}
{% endblock %}

{% block sidebar %}
{% include "company/manufacturer_part_sidebar.html" %}
{% endblock sidebar %}

{% block breadcrumbs %}
<li class='breadcrumb-item'><a href='{% url "manufacturer-index" %}'>{% trans "Manufacturers" %}</a></li>
{% if part.manufacturer %}
<li class='breadcrumb-item'><a href='{% url "company-detail" part.manufacturer.id %}'>{{ part.manufacturer.name }}</a></li>
{% endif %}
<li class="breadcrumb-item active" aria-current="page"><a href='{% url "manufacturer-part-detail" part.id %}'>{{ part.MPN }}</a></li>
{% endblock breadcrumbs %}

{% block heading %}
<h4>
    {% trans "Manufacturer Part" %}: {{ part.part.full_name }}
</h4>
{% endblock heading %}

{% block actions %}
{% if user.is_staff and perms.company.change_company %}
{% url 'admin:company_supplierpart_change' part.pk as url %}
{% include "admin_button.html" with url=url %}
{% endif %}
{% if roles.purchase_order.change %}
{% comment "for later" %}
{% if roles.purchase_order.add %}
<button type='button' class='btn btn-outline-secondary' id='order-part' title='{% trans "Order part" %}'>
    <span class='fas fa-shopping-cart'></span>
</button>
{% endif %}
{% endcomment %}
<button type='button' class='btn btn-outline-secondary' id='edit-part' title='{% trans "Edit manufacturer part" %}'>
    <span class='fas fa-edit icon-green'/>
</button>
{% if roles.purchase_order.delete %}
<button type='button' class='btn btn-outline-secondary' id='delete-part' title='{% trans "Delete manufacturer part" %}'>
    <span class='fas fa-trash-alt icon-red'/>
</button>
{% endif %}
{% endif %}
{% endblock actions %}

{% block thumbnail %}
<img class='part-thumb'
{% if part.part.image %}
src='{{ part.part.image.url }}'
{% else %}
src="{% static 'img/blank_image.png' %}"
{% endif %}/>
{% endblock thumbnail %}

{% block details %}

<table class='table table-striped table-condensed'>
    <col width='25'>
    <tr>
        <td><span class='fas fa-shapes'></span></td>
        <td>{% trans "Internal Part" %}</td>
        <td>
            {% if part.part %}
            <a href="{% url 'part-detail' part.part.id %}?display=part-suppliers">{{ part.part.full_name }}</a>{% include "clip.html"%}
            {% endif %}
        </td>
    </tr>
    {% if part.description %}
    <tr>
        <td></td>
        <td>{% trans "Description" %}</td>
        <td>{{ part.description }}{% include "clip.html"%}</td>
    </tr>
    {% endif %}
</table>

{% endblock details %}

{% block details_right %}

<table class="table table-striped table-condensed">
    <col width='25'>

    <tr>
        <td><span class='fas fa-industry'></span></td>
        <td>{% trans "Manufacturer" %}</td>
        <td><a href="{% url 'company-detail' part.manufacturer.id %}">{{ part.manufacturer.name }}</a>{% include "clip.html"%}</td>
    </tr>
    <tr>
        <td><span class='fas fa-hashtag'></span></td>
        <td>{% trans "MPN" %}</td>
        <td>{{ part.MPN }}{% include "clip.html"%}</td>
    </tr>
    {% if part.link %}
    <tr>
        <td><span class='fas fa-link'></span></td>
        <td>{% trans "External Link" %}</td>
        <td><a href="{{ part.link }}">{{ part.link }}</a>{% include "clip.html"%}</td>
    </tr>
    {% endif %}
</table>
{% endblock details_right %}

{% block page_content %}

<div class='panel panel-hidden' id='panel-supplier-parts'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Suppliers" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button class="btn btn-success" id='supplier-create'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Supplier Part" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='supplier-button-toolbar'>
            <div class='btn-group'>
                <div id='opt-dropdown' class="btn-group">
                    <button id='supplier-part-options' class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">{% trans "Options" %} <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a class='dropdown-item' href='#' id='supplier-part-delete' title='{% trans "Delete supplier parts" %}'><span class='fas fa-trash-alt icon-red'></span> {% trans "Delete" %}</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <table class="table table-striped table-condensed" id='supplier-table' data-toolbar='#supplier-button-toolbar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-parameters'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Parameters" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button class='btn btn-success' id='parameter-create'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Parameter" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='parameter-toolbar'>
            <div class='btn-group'>
                <div id='opt-dropdown' class="btn-group">
                    <button id='parameter-options' class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">{% trans "Options" %} <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a class='dropdown-item' href='#' id='multi-parameter-delete' title='{% trans "Delete parameters" %}'><span class='fas fa-trash-alt icon-red'></span> {% trans "Delete" %}</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <table class='table table-striped table-condensed' id='parameter-table' data-toolbar='#parameter-toolbar'></table>
    </div>
</div>

{% endblock %}


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

function reloadParameters() {
    $("#parameter-table").bootstrapTable("refresh");
}

$('#parameter-create').click(function() {

    constructForm('{% url "api-manufacturer-part-parameter-list" %}', {
        method: 'POST',
        fields: {
            name: {},
            value: {},
            units: {},
            manufacturer_part: {
                value: {{ part.pk }},
                hidden: true,
            }
        },
        title: '{% trans "Add Parameter" %}',
        onSuccess: reloadParameters
    });
});

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

$('#supplier-create').click(function () {
    createSupplierPart({
        manufacturer_part: {{ part.pk }},
        part: {{ part.part.pk }},
        onSuccess: reloadSupplierPartTable,
    });
});

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

    var selections = $("#supplier-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() {
                    reloadSupplierPartTable();
                });
            }
        }
    );
});

$("#multi-parameter-delete").click(function() {

    var selections = $("#parameter-table").bootstrapTable("getSelections");

    var text = `
    <div class ='alert alert-block alert-danger'>
        <p>{% trans "Selected parameters will be deleted" %}:</p>
        <ul>`;

    selections.forEach(function(item) {
        text += `<li>${item.name} - <em>${item.value}</em></li>`;
    });

    text += `
        </ul>
    </div>`;
    
    showQuestionDialog(
        '{% trans "Delete Parameters" %}',
        text,
        {
            accept_text: '{% trans "Delete" %}',
            accept: function() {
                // Delete each parameter via the API
                var requests = [];

                selections.forEach(function(item) {
                    var url = `/api/company/part/manufacturer/parameter/${item.pk}/`;

                    requests.push(inventreeDelete(url));
                });

                $.when.apply($, requests).done(function() {
                    $('#parameter-table').bootstrapTable('refresh');
                });
            }
        }
    );
});

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

loadManufacturerPartParameterTable(
    "#parameter-table",
    "{% url 'api-manufacturer-part-parameter-list' %}",
    {
        params: {
            manufacturer_part: {{ part.id }},
        }
    }
);

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

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

$('#order-part, #order-part2').click(function() {
    launchModalForm(
        "{% url 'order-parts' %}",
        {
            data: {
                part: {{ part.part.id }},
            },
            reload: true,
        },
    );
});

$('#edit-part').click(function () {

    editManufacturerPart({{ part.pk }}, {
        onSuccess: function() {
            location.reload();
        }
    });
});

$('#delete-part').click(function() {

    deleteManufacturerPart({{ part.pk }}, {
        onSuccess: function() {
            window.location.href = "{% url 'company-detail' part.manufacturer.id %}";
        }
    });
});

enableSidebar('manufacturerpart');

{% endblock %}