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

{% block css %}

{% endblock %}

{% block details %}

{% include 'part/tabs.html' with tab='bom' %}

<h4>{% trans "Bill of Materials" %}</h4>
<hr>

{% if part.bom_checked_date %}
{% if part.is_bom_valid %}
<div class='alert alert-block alert-info'>
{% else %}
<div class='alert alert-block alert-danger'>
    The BOM for <i>{{ part.full_name }}</i> has changed, and must be validated.<br>
{% endif %}
    The BOM for <i>{{ part.full_name }}</i> was last checked by {{ part.bom_checked_by }} on {{ part.bom_checked_date }}
</div>
{% else %}
<div class='alert alert-danger alert-block'>
    <b>The BOM for <i>{{ part.full_name }}</i> has not been validated.</b>
</div>
{% endif %}

<div id='button-toolbar'>
    <div class="btn-group" role="group" aria-label="...">
        {% if editing_enabled %}
        <button class='btn btn-default' type='button' title='{% trans "Remove selected BOM items" %}' id='bom-item-delete'>
            <span class='fas fa-trash-alt'></span>
        </button>
        <button class='btn btn-primary' type='button' title='{% trans "Import BOM data" %}' id='bom-upload'>
            <span class='fas fa-file-upload'></span> {% trans "Import from File" %}
        </button>
        {% if part.variant_of %}
        <button class='btn btn-default' type='button' title='{% trans "Copy BOM from parent part" %}' id='bom-duplicate'>
            <span class='fas fa-clone'></span> {% trans "Copy from Parent" %}
        </button>
        {% endif %}
        <button class='btn btn-default' type='button' title='{% trans "New BOM Item" %}' id='bom-item-new'>
            <span class='fas fa-plus-circle'></span> {% trans "Add Item" %}
        </button>
        <button class='btn btn-success' type='button' title='{% trans "Finish Editing" %}' id='editing-finished'>
            <span class='fas fa-check-circle'></span> {% trans "Finished" %}
        </button>
        {% elif part.active %}
        {% if roles.part.change %}
        <button class='btn btn-primary' type='button' title='{% trans "Edit BOM" %}' id='edit-bom'>
            <span class='fas fa-edit'></span> {% trans "Edit" %}
        </button>
        {% if part.is_bom_valid == False %}
        <button class='btn btn-success' id='validate-bom' title='{% trans "Validate Bill of Materials" %}' type='button'>
            <span class='fas fa-clipboard-check'></span> {% trans "Validate" %}
        </button>
        {% endif %}
        {% endif %}
        <button title='{% trans "Export Bill of Materials" %}' class='btn btn-default' id='download-bom' type='button'>
            <span class='fas fa-file-download'></span> {% trans "Export" %}
        </button>
        {% endif %}
    </div>
    <div class='filter-list' id='filter-list-bom'>
        <!-- Empty div (will be filled out with avilable BOM filters) -->
    </div>
</div>

<table class='table table-striped table-condensed' data-toolbar="#button-toolbar" id='bom-table'>
</table>

<table class='table table-striped table-condensed' id='test-table'></table>

{% endblock %}

{% block js_load %}
{{ block.super }}

<!-- jquery-treegrid -->
<script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.js" %}'></script>
<script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.bootstrap3.js" %}'></script>

<!-- boostrap-table-treegrid -->
<script type='text/javascript' src='{% static "bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.js" %}'></script>

{% endblock %}


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

    // Load the BOM table data
    loadBomTable($("#bom-table"), {
        editable: {{ editing_enabled }},
        bom_url: "{% url 'api-bom-list' %}",
        part_url: "{% url 'api-part-list' %}",
        parent_id: {{ part.id }} ,
        sub_part_detail: true,
    });

    linkButtonsToSelection($("#bom-table"),
        [
            "#bom-item-delete",
        ]
    );

    {% if editing_enabled %}
    $("#editing-finished").click(function() {
        location.href = "{% url 'part-bom' part.id %}";
    });

    $('#bom-item-delete').click(function() {

        // Get a list of the selected BOM items
        var rows = $("#bom-table").bootstrapTable('getSelections');

        // TODO - In the future, display (in the dialog) which items are going to be deleted

        showQuestionDialog(
            '{% trans "Delete selected BOM items?" %}',
            '{% trans "All selected BOM items will be deleted" %}',
            {
                accept: function() {

                    // Delete each row one at a time!
                    function deleteRow(idx) {

                        if (idx >= rows.length) {
                            // All selected rows deleted - reload the table
                            $("#bom-table").bootstrapTable('refresh');
                        }

                        var row = rows[idx];

                        var url = `/api/bom/${row.pk}/`;

                        inventreeDelete(
                            url,
                            {
                                complete: function(xhr, status) {
                                    deleteRow(idx + 1);
                                }
                            }
                        )
                    }

                    // Start the deletion!
                    deleteRow(0);
                }
            }
        );
        });

    $('#bom-upload').click(function() {
        location.href = "{% url 'upload-bom' part.id %}";
    });

    $('#bom-duplicate').click(function() {
        launchModalForm(
            "{% url 'duplicate-bom' part.id %}",
            {
                success: function() {
                    $('#bom-table').bootstrapTable('refresh');
                }
            }
        );
    });

    $("#bom-item-new").click(function () {
        launchModalForm(
            "{% url 'bom-item-create' %}?parent={{ part.id }}",
            {
                success: function() {
                    $("#bom-table").bootstrapTable('refresh');
                },
                secondary: [
                    {
                        field: 'sub_part',
                        label: 'New Part',
                        title: 'Create New Part',
                        url: "{% url 'part-create' %}",
                    },
                ]
            }
        );
    });

    {% else %}

    $("#validate-bom").click(function() {
        launchModalForm(
            "{% url 'bom-validate' part.id %}",
            {
                reload: true,
            }
        );
    });

    $("#edit-bom").click(function () {
        location.href = "{% url 'part-bom' part.id %}?edit=1";
    });

    $("#download-bom").click(function () {
        launchModalForm("{% url 'bom-export' part.id %}",
            {
                success: function(response) {
                    location.href = response.url;
                },
            }
        );
    });

    {% endif %}

{% endblock %}
