{# To include this widget, make sure to pass: `parts`, `order_by`, `part`, `part_revision`, `profile` variables  - TODO Could remove part if we pass part revision #}
{% load static %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/treetable-theme.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/jquery.treetable.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/tablesorter-theme.materialize.css' %}"/>
{% endblock %}

<div class="row printer-hide" style="padding-top: 16px;">
    <div class="col s6">
        <a class="waves-effect waves-green btn-flat btn-icon-round button-expand tooltipped" data-position="bottom" data-tooltip="Expand BOM" onclick="expandTree()"><i class="material-icons">unfold_more</i></a>
        <a class="waves-effect waves-green btn-flat btn-icon-round button-collapse tooltipped" data-position="bottom" data-tooltip="Collapse BOM" onclick="collapseTree()"><i class="material-icons">unfold_less</i></a>
        <a class="waves-effect waves-green btn-flat btn-icon-round button-reset-filter-indented tooltipped" data-position="bottom" data-tooltip="Reset filter" onclick="refreshTableSorterIndented()"><i
                class="material-icons">refresh</i></a>
    </div>
    <div class="col s6 right-align">
        {% if manage and perms.bom.edit_part %}
            <a class="btn waves-effect waves-green btn-flat red-text"
               href="{% url 'bom:part-remove-all-subparts' part_id=part.id part_revision_id=part_revision_id %}"
               onclick="return confirm('Are you sure you want to remove ALL subparts from {{ part.full_part_number }}?')">Remove All Subparts</a>
        {% else %}
            <!-- Dropdown Trigger -->
            <button class="dropdown-trigger-indented waves-effect waves-green btn-flat"
                    data-target='manage-bom-{{ part.id }}-indented'>
                <i class="material-icons right">arrow_drop_down</i>Manage
            </button>
            <!-- Dropdown Structure -->
            <ul id='manage-bom-{{ part.id }}-indented' class='dropdown-content'>
                {% if perms.bom.edit_part %}
                    <li>{% if part_revision and not part_revision.is_immutable %}
                        <a class="green-text text-lighten-1" href="{% url 'bom:part-manage-bom' part_id=part.id part_revision_id=part_revision.id %}">
                            <i class="material-icons green-text text-lighten-1">edit</i>Edit BOM</a>
                    {% else %}
                        <a class="grey-text text-lighten-1" onclick="alert('Can\'t edit a released part!')"><i class="material-icons grey-text text-lighten-1">edit</i>Edit BOM</a>
                    {% endif %}
                    </li>
                {% endif %}
                {% if part_revision %}
                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-revision-export-bom' part_revision_id=part_revision.id %}">
                        <i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV</a>
                    </li>
                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-revision-export-bom-sourcing' part_revision_id=part_revision.id %}">
                        <i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV (sourcing)</a>
                    </li>
                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-revision-export-bom-sourcing-detailed' part_revision_id=part_revision.id %}">
                        <i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV (sourcing detailed)</a>
                    </li>
                {% else %}
                    <li><a class="green-text text-lighten-1 disabled" href=""><i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV</a></li>
                {% endif %}
            </ul>
        {% endif %}
    </div>
</div>
<div class="responsive-table-wrapper">
    <table id="indented-bom" class="highlight part-list tight single-line">
        <thead>
        <tr>
            <th class="text-normal">Level</th>
            <th class="text-normal">Part No.</th>
            <th class="text-normal">Qty</th>
            <th class="text-normal">Reference</th>
            <th class="text-normal">DNL</th>
            <th class="text-normal">Synopsis</th>
            <th class="text-normal">Rev</th>
            <th class="text-normal">Manufacturer</th>
            <th class="text-normal">MPN</th>
            <th class="text-normal"><i>Ext. Qty</i></th>
            <th class="text-normal"><i>Order Qty</i></th>
            <th class="text-normal">Vendor</th>
            <th class="text-normal">Price</th>
            <th class="text-normal"><i>Ext Cost</i></th>
            <th class="text-normal">NRE</th>
            {% if perms.bom.edit_part and manage %}
                <th class="sorter-false" data-sorter="false">Manage</th>
            {% endif %}
        </tr>
        </thead>
        {% for bom_id, subpart in bom_items.items %}
            {% if subpart.references|length > 25 %}
                <div id="modal-{{ subpart.part.id }}-references" class="modal">
                    <div class="modal-content">
                        <h2>{{ subpart.part.full_part_number }} References</h2>
                        <p>{{ subpart.references }}</p>
                    </div>
                    <div class="modal-footer">
                        <a href="#!" class="modal-close waves-effect green lighten-1 waves-green btn-flat">Ok</a>
                    </div>
                </div>
            {% endif %}
            {% if subpart.part_revision.synopsis|length > 75 %}
                <div id="modal-{{ subpart.part.id }}-synposis" class="modal">
                    <div class="modal-content">
                        <h2>{{ subpart.part.full_part_number }} Synposis</h2>
                        <p>{{ subpart.part_revision.synopsis }}</p>
                    </div>
                    <div class="modal-footer">
                        <a href="#!" class="modal-close waves-effect green lighten-1 waves-green btn-flat">Ok</a>
                    </div>
                </div>
            {% endif %}
            <tr data-tt-id="{{ bom_id }}"
                {% if subpart.parent_id %}data-tt-parent-id="{{ subpart.parent_id }}"{% endif %}>
                <td class="text-normal">{{ subpart.indent_level }}</td>
                <td class="text-normal"><a href="{% url 'bom:part-info' part_id=subpart.part.id %}">{{ subpart.part.full_part_number }}</a></td>
                <td class="text-normal">{{ subpart.quantity | floatformat }}</td>
                <td class="text-normal">{{ subpart.references | default:"-" | truncatechars:25 }}{% if subpart.references|length > 25 %}
                    <a class="modal-trigger modal-{{ subpart.part.id }}-references" href="#modal-{{ subpart.part.id }}-references">&nbsp;[+]</a>
                {% endif %}</td>
                <td class="text-normal">{{ subpart.do_not_load | default:"-" }}</td>
                <td class="text-normal">{{ subpart.part_revision.synopsis | truncatechars:75 }}{% if subpart.part_revision.synopsis|length > 75 %}
                    <a class="modal-trigger modal-{{ subpart.part.id }}-synposis" href="#modal-{{ subpart.part.id }}-synposis">&nbsp;[+]</a>
                {% endif %}
                <td class="text-normal">{{ subpart.part_revision.revision }}</td>
                <td class="text-normal">{{ subpart.part.primary_manufacturer_part.manufacturer.name }}
                    {% if subpart.part.manufacturer_parts.count > 1 %}
                        <i>(+{{ subpart.part.manufacturer_parts.count }})</i>{% endif %}</td>
                <td class="text-normal">{% if subpart.part.primary_manufacturer_part.link %}<a href="{{ subpart.part.primary_manufacturer_part.link }}" target="_blank">{% endif %}{{ subpart.part.primary_manufacturer_part.manufacturer_part_number }}{% if subpart.part.primary_manufacturer_part.link %}&nbsp;<i class="material-icons" style="font-size: 14px;">open_in_new</i></a>{% endif %}</td>
                <td class="text-normal" id="bom-indented-ext-qty-{{ subpart.part_revision.id }}">{{ subpart.total_extended_quantity | default:"-" }}</td>
                <td class="text-normal" id="bom-indented-order-qty-{{ subpart.part_revision.id }}">{{ subpart.order_quantity | default:"-" }}</td>
                <td class="text-normal" id="bom-indented-seller-name-{{ subpart.part_revision.id }}">{{ subpart.seller_part.seller.name | default:"-" }}</td>
                <td class="text-normal" id="bom-indented-unit-cost-{{ subpart.part_revision.id }}">{{ subpart.seller_part.unit_cost | default:"-" }}</td>
                <td class="text-normal" id="bom-indented-ext-cost-{{ subpart.part_revision.id }}">{% if subpart.seller_part %}{{ subpart.order_cost }}{% else %}-{% endif %}</td>
                <td class="text-normal">{{ subpart.seller_part.nre_cost | default:"-" }}</td>
                {% if subpart.indent_level == 1 and subpart.subpart is not None and manage %}
                    <td>
                        <a class='dropdown-trigger' href='#'
                           data-target='dropdown{{ subpart.subpart.id }}'><i class="material-icons left green-text">more_horiz</i></a>
                        <!-- Dropdown Structure -->
                        <ul id='dropdown{{ subpart.subpart.id }}' class='dropdown-content'>
                            <li><a class="green-text text-lighten-1"
                                   href="{% url 'bom:part-edit-subpart' part_id=part.id part_revision_id=part_revision_id subpart_id=subpart.subpart.id %}"><i
                                    class="material-icons green-text text-lighten-1">edit</i>Edit or Change
                                Rev</a>
                            <li class="divider" tabindex="-1"></li>
                            <li><a class="red-text text-lighten-1"
                                   href="{% url 'bom:part-remove-subpart' part_id=part.id part_revision_id=part_revision.id subpart_id=subpart.subpart.id %}"
                                   onclick="return confirm('Are you sure you want to remove {{ subpart.part.full_part_number }}?')"><i
                                    class="material-icons red-text text-lighten-1">delete_forever</i>Remove</a>
                            </li>
                        </ul>
                    </td>
                {% elif manage %}
                    <td></td>
                {% endif %}
            </tr>
        {% empty %}
            <tr>
                <td colspan="99" style="text-align: center; height: 20vh;"><i>This part does not contain any other parts.</i></td>
            </tr>
        {% endfor %}
    </table>
</div>

<!-- Tree Table -->
<script src="{% static 'bom/js/jquery.treetable.js' %}"></script>
<script>
    $("#indented-bom").treetable({
        expandable: true,
        indent: 2,
        initialState: 'collapsed',
        onInitialized: function () {
            $("#indented-bom").treetable("reveal", {{ part_revision.id }});
            $('.button-collapse').hide();
        },
        onNodeCollapse: function () {
            $('.button-expand').show();
        },
        onNodeExpand: function () {
            $('.button-collapse').show();
        }
    });

    function expandTree() {
        $('#indented-bom').treetable('expandAll');
        $('.button-expand').hide();
        return false;
    }

    function collapseTree() {
        $('#indented-bom').treetable('collapseAll');
        $('#indented-bom').treetable("reveal", {{ part_revision.id }});
        $('.button-collapse').hide();
        return false;
    }
</script>

<!-- Table Sorter -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/js/jquery.tablesorter.widgets.min.js"></script>
<script>
    $(function () {
        $("#indented-bom").on('update', initTableSorterIndented);
        initTableSorterIndented();
    });

    function initTableSorterIndented() {
        $('.button-reset-filter-indented').hide();
        $("#indented-bom").tablesorter({
            theme: "materialize",
            headers: {
                '.manage': {
                    sorter: false
                }
            }
        }).bind("sortEnd", function (e, t) {
            $('.button-reset-filter-indented').show();
        });
    }

    function refreshTableSorterIndented() {
        $('#indented-bom').trigger('sortReset');
        $('.button-reset-filter-indented').hide();
        return false;
    }
</script>

<script>
    $(document).ready(function () {
        $('.dropdown-trigger-indented').dropdown({
            inDuration: 200,
            outDuration: 225,
            constrainWidth: false, // Does not change width of dropdown to that of the activator
            hover: false, // Activate on hover
            gutter: 0, // Spacing from edge
            alignment: 'left', // Displays dropdown with edge aligned to the left of button
            stopPropagation: false, // Stops event propagation
            coverTrigger: false
        });

        $('.tooltipped').tooltip();
    });
</script>

<script>
    $(document).ready(function () {
        $('.modal').modal();
    });
</script>