{% extends "part/part_base.html" %}
{% load static %}
{% load i18n %}

{% block details %}

{% include 'part/tabs.html' with tab='sales-prices' %}

<h4>{% trans "Sale Price" %}</h4>
<hr>

<div id='price-break-toolbar' class='btn-group'>
    <button class='btn btn-primary' id='new-price-break' type='button'>{% trans "Add Price Break" %}</button>
</div>

<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");
}

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

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

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

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

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

            launchModalForm(
                `/part/sale-price/${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;
            }
        },
    ]
})

{% endblock %}