{# 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 staticfiles %}

<div class="row" style="padding-top: 16px;">
    <div class="col s6">
        <a class="waves-effect waves-green btn-flat btn-icon-round button-reset-filter-flat tooltipped" data-position="bottom" data-tooltip="Reset filter" onclick="refreshTableSorterFlat()"><i
                class="material-icons">refresh</i></a>
    </div>
    <div class="col s6 right-align">
        {% if manage and profile.role == 'A' %}
            <a class="waves-effect waves-green grey lighten-4 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-flat waves-effect waves-green grey lighten-4 btn-flat" href='#' data-target='manage-bom-{{ part.id }}-flat'>
                <i class="material-icons right">arrow_drop_down</i>Manage
            </button>
            <!-- Dropdown Structure -->
            <ul id='manage-bom-{{ part.id }}-flat' class='dropdown-content'>
                {% if profile.role == 'A' %}
                    <li>{% if part_revision.configuration == 'W' %}
                        <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 (indented)</a>
                    </li>
                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-revision-export-bom-flat' part_revision_id=part_revision.id %}">
                        <i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV (flat)</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" style="padding-bottom: 25px;">
    <table id="flat-bom" class="highlight part-list tight single-line">
        <thead>
        <tr>
            <th class="text-normal">Part No.</th>
            <th class="text-normal">Qty</th>
            <th class="text-normal">Refs</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">Seller</th>
            <th class="text-normal">Price</th>
            <!-- <th class="text-normal"><i>Ext Cost</i></th> -->
            <th class="text-normal">NRE</th>
        </tr>
        </thead>
        {% for bom_id, subpart in bom_items.items %}
            <tr>
                <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.extended_quantity }}</td>
                <td class="text-normal">{{ subpart.references | default:"-" }}</td>
                <td class="text-normal">{{ subpart.do_not_load | default:"-" }}</td>
                <td class="text-normal">{{ subpart.part_revision.synopsis }}</td>
                <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">{{ subpart.part.primary_manufacturer_part.manufacturer_part_number }}</td>
                <td class="text-normal" id="bom-flat-seller-name-{{ subpart.part_revision.id }}">{{ subpart.seller_part.seller.name | default:"-" }}</td>
                <td class="text-normal" id="bom-flat-unit-cost-{{ subpart.part_revision.id }}">{{ subpart.seller_part.unit_cost | default:"-" }}</td>
                <td class="text-normal">{{ subpart.seller_part.nre_cost | default:"-" }}</td>
            </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>

<!-- 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 () {
        $("#flat-bom").on('update', initTableSorterFlat);
        initTableSorterFlat();
    });

    function initTableSorterFlat() {
        $('.button-reset-filter-flat').hide();
        $("#flat-bom").tablesorter({theme: "materialize"})
            .bind("sortEnd", function (e, t) {
                $('.button-reset-filter-flat').show();
            });
    }

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

<script>
    $(document).ready(function () {
        $('.dropdown-trigger-flat').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
            belowOrigin: true, // Displays dropdown below the button
            alignment: 'left', // Displays dropdown with edge aligned to the left of button
            stopPropagation: false // Stops event propagation
        });

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

