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

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

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

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

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

{% block actions %}
{% admin_url user "company.supplierpart" part.pk as url %}
{% include "admin_button.html" with url=url %}

{% if barcodes %}
<!-- Barcode actions menu -->
<div class='btn-group' role='group'>
    <button id='barcode-options' title='{% trans "Barcode actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
        <span class='fas fa-qrcode'></span> <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' role='menu'>
        <li><a class='dropdown-item' href='#' id='show-qr-code'><span class='fas fa-qrcode'></span> {% trans "Show QR Code" %}</a></li>
        {% if part.barcode_hash %}
        <li><a class='dropdown-item' href='#' id='barcode-unlink'><span class='fas fa-unlink'></span> {% trans "Unlink Barcode" %}</a></li>
        {% else %}
        <li><a class='dropdown-item' href='#' id='barcode-link'><span class='fas fa-link'></span> {% trans "Link Barcode" %}</a></li>
        {% endif %}
    </ul>
</div>
{% endif %}
{% if roles.purchase_order.change or roles.purchase_order.add or roles.purchase_order.delete %}
<div class='btn-group'>
    <button id='supplier-part-actions' title='{% trans "Supplier part actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
        <span class='fas fa-tools'></span> <span class='caret'></span>
    </button>
    <ul class='dropdown-menu'>
        {% if roles.purchase_order.add %}
        <li><a class='dropdown-item' href='#' id='order-part' title='{% trans "Order Part" %}'>
            <span class='fas fa-shopping-cart'></span> {% trans "Order Part" %}
        </a></li>
        {% endif %}
        {% if roles.purchase_order.change %}
        <li><a class='dropdown-item' href='#' id='update-part-availability' title='{% trans "Update Availability" %}'>
            <span class='fas fa-building'></span> {% trans "Update Availability" %}
        </a></li>
        <li><a class='dropdown-item' href='#' id='edit-part' title='{% trans "Edit Supplier Part" %}'>
            <span class='fas fa-edit icon-green'></span> {% trans "Edit Supplier Part" %}
        </a></li>
        {% endif %}
        {% if roles.purchase_order.add %}
        <li><a class='dropdown-item' href='#' id='duplicate-part' title='{% trans "Duplicate Supplier Part" %}'>
            <span class='fas fa-clone'></span> {% trans "Duplicate Supplier Part" %}
        </a></li>
        {% endif %}
        {% if roles.purchase_order.delete %}
        <li><a class='dropdown-item' href='#' id='delete-part' title='{% trans "Delete Supplier Part" %}'>
            <span class='fas fa-trash-alt icon-red'></span> {% trans "Delete Supplier  Part" %}
        </a></li>
        {% endif %}
    </ul>
</div>
{% 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 %}
    {% if part.availability_updated %}
    <tr>
        <td></td>
        <td>{% trans "Available" %}</td>
        <td>{% decimal part.available %}<span class='badge bg-dark rounded-pill float-right'>{% render_date part.availability_updated %}</span></td>
    </tr>
    {% endif %}
    {% include "barcode_data.html" with instance=part %}
</table>

{% endblock details %}

{% block details_right %}

<table class="table table-striped table-condensed">
    <col width='25'>
        <tr>
            <td><span class='fas fa-building'></span></td>
            <td>{% trans "Supplier" %}</td>
            <td>{% if part.supplier %}
                <a href="{% url 'company-detail' part.supplier.id %}">{{ part.supplier.name }}</a>{% include "clip.html" %}
                {% else %}
                <em>{% trans "No supplier information available" %}</em>
                {% endif %}
            </td>
        </tr>
        <tr>
            <td><span class='fas fa-hashtag'></span></td>
            <td>{% trans "SKU" %}</td>
            <td>{{ part.SKU }}{% include "clip.html" %}</tr>
        </tr>
        {% if part.manufacturer_part.manufacturer %}
        <tr>
            <td><span class='fas fa-industry'></span></td>
            <td>{% trans "Manufacturer" %}</td>
            <td><a href="{% url 'company-detail' part.manufacturer_part.manufacturer.id %}">
            {{ part.manufacturer_part.manufacturer.name }}</a>{% include "clip.html" %}</td>
        </tr>
        {% endif %}
        {% if part.manufacturer_part.MPN %}
        <tr>
            <td><span class='fas fa-hashtag'></span></td>
            <td>{% trans "MPN" %}</td>
            <td><a href="{% url 'manufacturer-part-detail' part.manufacturer_part.id %}">{{ part.manufacturer_part.MPN }}</a>{% include "clip.html" %}</td>
        </tr>
        {% endif %}
        {% if part.packaging %}
        <tr>
            <td><span class='fas fa-cube'></span></td>
            <td>{% trans "Packaging" %}</td>
            <td>{{ part.packaging }}{% include "clip.html" %}</td>
        </tr>
        {% endif %}
        {% if part.pack_quantity %}
        <tr>
            <td><span class='fas fa-box'></span></td>
            <td>
                {% trans "Units" %}
                {% if part.part.units %}
                <span class='float-right'>
                    <em>[ {% include "part/part_units.html" with part=part.part %}]</em>
                </span>
                {% endif %}
            </td>
            <td>
                {{ part.pack_quantity }}
                {% include "clip.html" %}
                {% if part.part.units and part.pack_quantity_native %}
                <span class='fas fa-info-circle float-right' title='{% decimal part.pack_quantity_native %} {{ part.part.units }}'></span>
                {% endif %}
            </td>
        </tr>
        {% endif %}
        {% if part.note %}
        <tr>
            <td><span class='fas fa-sticky-note'></span></td>
            <td>{% trans "Note" %}</td>
            <td>{{ part.note }}{% include "clip.html" %}</td>
        </tr>
        {% endif %}
        {% 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 new_window=True %}</td>
        </tr>
        {% endif %}
</table>
{% endblock details_right %}

{% block page_content %}

<div class='panel panel-hidden' id='panel-stock'>
    <div class='panel-heading'>
        <span class='d-flex flex-wrap'>
            <h4>{% trans "Supplier Part Stock" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button type='button' class='btn btn-success' id='item-create' title='{% trans "Create new stock item" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Stock Item" %}
                </button>
            </div>
        </span>
    </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 "Supplier Part Orders" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.purchase_order.add %}
                <button class='btn btn-primary' type='button' id='order-part2' title='{% trans "Order part" %}'>
                    <span class='fas fa-shopping-cart'></span> {% trans "Order Part" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='button-bar'>
            {% include "filter_list.html" with id='purchaseorder' %}
        </div>
        <table class='table table-striped table-condensed po-table' id='purchase-order-table' data-toolbar='#button-bar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-pricing'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Pricing Information" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.purchase_order.add %}
                <button class='btn btn-success' id='new-price-break' type='button'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Price Break" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='price-break-toolbar'>
            {% include "filter_list.html" with id='supplierpricebreak' %}
        </div>

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

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

{% endblock page_content %}

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

// Load the "notes" tab
onPanelLoad('supplier-part-notes', function() {

    setupNotesField(
        'supplier-part-notes',
        '{% url "api-supplier-part-detail" part.pk %}',
        {
            model_type: "supplierpart",
            model_id: {{ part.pk }},
            editable: {% js_bool roles.purchase_order.change %},
        }
    );
});

{% if barcodes %}

$("#show-qr-code").click(function() {
    showQRDialog(
        '{% trans "Supplier Part QR Code" escape %}',
        `{% clean_barcode part.barcode %}`
    );
});

$("#barcode-link").click(function() {
    linkBarcodeDialog(
        {
            supplierpart: {{ part.pk }},
        },
        {
            title: '{% trans "Link Barcode to Supplier Part" escape %}',
        }
    );
});

$("#barcode-unlink").click(function() {
    unlinkBarcode({
        supplierpart: {{ part.pk }},
    });
});
{% endif %}

loadSupplierPriceBreakTable({
    part: {{ part.pk }}
});

$('#new-price-break').click(function() {
    createSupplierPartPriceBreak({{ part.pk }}, {
        onSuccess: function() {
            $("#price-break-table").bootstrapTable('refresh');
        }
    });

});

loadPurchaseOrderTable($("#purchase-order-table"), {
    params: {
        supplier_part: {{ part.id }},
    }
});

loadStockTable($("#stock-table"), {
    params: {
        supplier_part: {{ part.id }},
        location_detail: true,
        part_detail: false,
    },
});

$("#item-create").click(function() {
    createNewStockItem({
        data: {
            part: {{ part.part.id }},
            supplier_part: {{ part.id }},
        },
    });
});

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

    inventreeGet(
        '{% url "api-part-detail" part.part.pk %}', {},
        {
            success: function(response) {
                orderParts([response], {
                    supplier_part: {{ part.pk }},
                    {% if part.supplier %}
                    supplier: {{ part.supplier.pk }},
                    {% endif %}
                });
            }
        }
    );
});

{% if roles.purchase_order.change %}

$('#update-part-availability').click(function() {
    editSupplierPart({{ part.pk }}, {
        fields: {
            available: {},
        },
        title: '{% trans "Update Part Availability" escape %}',
        onSuccess: function() {
            location.reload();
        }
    });
});

$('#duplicate-part').click(function() {
    duplicateSupplierPart({{ part.pk }}, {
        follow: true
    });
});

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

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

{% endif %}

$('#delete-part').click(function() {
    inventreeGet(
        '{% url "api-supplier-part-detail" part.pk %}',
        {},
        {
            success: function(part) {
                deleteSupplierParts([part], {
                    success: function() {
                        {% if part.supplier %}
                        window.location.href = '{% url "company-detail" part.supplier.id %}';
                        {% else %}
                        window.location.href = '{% url "index" %}';
                        {% endif %}
                    }
                });
            }
        }
    );
});

enableSidebar('supplierpart');

{% endblock js_ready %}
