{% extends "company/supplier_part_base.html" %}
{% load static %}
{% load i18n %}
{% load inventree_extras %}

{% block details %}

{% include "company/supplier_part_tabs.html" with tab='pricing' %}

<h4>{% trans "Pricing Information" %}</h4>

<hr>

{% if roles.purchase_order.add %}
<div id='price-break-toolbar' class='btn-group'>
    <button class='btn btn-primary' id='new-price-break' type='button'>
        <span class='fas fa-plus-circle'></span> {% trans "Add Price Break" %}
    </button>
</div>
{% endif %}

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

{% endblock %}

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

function reloadPriceBreaks() {
    $("#price-break-table").bootstrapTable("refresh");
}

$('#price-break-table').inventreeTable({
    name: 'buypricebreaks',
    formatNoMatches: function() { return "{% trans "No price break information found" %}"; },
    queryParams: {
        part: {{ part.id }},
    },
    url: "{% url 'api-part-supplier-price' %}",
    onLoadSuccess: function() {
        var table = $('#price-break-table');

        table.find('.button-price-break-delete').click(function() {
            var pk = $(this).attr('pk');

            launchModalForm(
                `/price-break/${pk}/delete/`,
                {
                    success: reloadPriceBreaks
                }
            );
        });

        table.find('.button-price-break-edit').click(function() {
            var pk = $(this).attr('pk');

            launchModalForm(
                `/price-break/${pk}/edit/`,
                {
                    success: reloadPriceBreaks
                }
            );
        });
    },
    columns: [
        {
            field: 'pk',
            title: 'ID',
            visible: false,
            switchable: false,
        },
        {
            field: 'quantity',
            title: '{% trans "Quantity" %}',
            sortable: true,
        },
        {
            field: 'cost',
            title: '{% trans "Price" %}',
            sortable: true,
            formatter: function(value, row, index) {
                var html = '';

                html += row.symbol || '';
                html += value;

                if (row.suffix) {
                    html += ' ' + row.suffix || '';
                }

                html += `<div class='btn-group float-right' role='group'>`

                html += makeIconButton('fa-edit icon-blue', 'button-price-break-edit', row.pk, '{% trans "Edit price break" %}');
                html += makeIconButton('fa-trash-alt icon-red', 'button-price-break-delete', row.pk, '{% trans "Delete price break" %}');

                html += `</div>`;
    
                return html;
            }
        },
    ]
});

$('#new-price-break').click(function() {
    launchModalForm("{% url 'price-break-create' %}",
        {
            reload: true,
            data: {
                part: {{ part.id }},
            }
        }
    );
});

{% endblock %}