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

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

{% 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_manufacturerpart_change' part.pk as url %}
{% include "admin_button.html" with url=url %}
{% endif %}
{% if roles.purchase_order.change %}
{% if roles.purchase_order.add and part.part.purchaseable %}
<button type='button' class='btn btn-outline-secondary' id='order-part' title='{% trans "Order part" %}'>
    <span class='fas fa-shopping-cart'></span>
</button>
{% endif %}
<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' alt="{% trans 'Part image' %}"
{% if part.part.image %}
src='{{ part.part.image.preview.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>
            {% if part.manufacturer %}
            <a href="{% url 'company-detail' part.manufacturer.id %}">{{ part.manufacturer.name }}</a>{% include "clip.html" %}
            {% else %}
            <em>{% trans "No manufacturer information available" %}</em>
            {% endif %}
        </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>{% include 'clip_link.html' with link=part.link %}</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'>
            {% include "filter_list.html" with id='supplier-part' %}
        </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-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-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'>
            {% include "filter_list.html" with id="manufacturer-part-parameters" %}
        </div>

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

{% endblock page_content %}

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

onPanelLoad("attachments", function() {
    loadAttachmentTable('{% url "api-manufacturer-part-attachment-list" %}', {
        filters: {
            manufacturer_part: {{ part.pk }},
        },
        fields: {
            manufacturer_part: {
                value: {{ part.pk }},
                hidden: true
            }
        }
    });
});

$('#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" %}',
        refreshTable: '#parameter-table',
    });
});

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

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

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

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

$('#order-part, #order-part2').click(function() {

    inventreeGet(
        '{% url "api-part-detail" part.part.pk %}', {},
        {
            success: function(response) {

                orderParts([response], {
                    manufacturer_part: {{ part.pk }},
                    {% if part.manufacturer %}
                    manufacturer: {{ part.manufacturer.pk }},
                    {% endif %}
                });
            }
        }
    );
});

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

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

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

    inventreeGet(
        '{% url "api-manufacturer-part-detail" part.pk %}',
        {},
        {
            success: function(data) {
                deleteManufacturerParts(
                    [data],
                    {
                        success: function() {
                            {% if part.manufacturer %}
                            window.location.href = "{% url 'company-detail' part.manufacturer.id %}";
                            {% else %}
                            window.location.href = "{% url 'index' %}";
                            {% endif %}
                        }
                    }
                );
            }
        }
    );
});

enableSidebar('manufacturerpart');

{% endblock js_ready %}
