{# To include this widget, make sure to pass: `manufacturer_parts`, `profile`, (optional, for mouser) `part_revision` variables  #}
{% 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' %}"/>
{% endblock %}

<div class="responsive-table-wrapper">
    <table id="manufacturer-parts" class="highlight tight treetable">
        <thead>
        <tr>
            <th>MPN</th>
            {% if show_manufacturer %}
                <th>Manufacturer</th>{% endif %}
            {% if show_part %}<th>Part</th>{% endif %}
            <th>Vendor</th>
            <th>PN</th>
            <th>MOQ</th>
            <th>MPQ</th>
            <th>Price</th>
            <th>Lead Time (days)</th>
            <th>NRE</th>
            <th>NCNR</th>
            <th colspan="2">Manage</th>
        </tr>
        </thead>
        <tbody>
        {% for manufacturer_part in manufacturer_parts %}
            <tr id="sourcing-mp-{{ manufacturer_part.id }}" data-tt-id="{{ manufacturer_part.id }}">
                <td>{% if manufacturer_part.link %}<a href="{{ manufacturer_part.link }}" target="_blank">{% endif %}{{ manufacturer_part.manufacturer_part_number }}{% if manufacturer_part.link %}&nbsp;<i class="material-icons" style="font-size: 14px;">open_in_new</i></a>{% endif %}</td>
                {% if show_manufacturer %}
                    <td>{% if manufacturer_part.manufacturer %}
                        <a href="{% url 'bom:manufacturer-info' manufacturer_id=manufacturer_part.manufacturer_id %}">{{ manufacturer_part.manufacturer }}</a>
                        {% if manufacturer_part.manufacturer.approval_status == 'A' %}
                            <i class="material-icons green-text tiny tooltipped"
                               data-tooltip="{{ manufacturer_part.manufacturer.get_approval_status_display }}">check_circle</i>
                        {% elif manufacturer_part.manufacturer.approval_status == 'R' %}
                            <i class="material-icons red-text tiny tooltipped"
                               data-tooltip="{{ manufacturer_part.manufacturer.get_approval_status_display }}">block</i>
                        {% else %}
                            <i class="material-icons grey-text text-lighten-1 tiny tooltipped"
                               data-tooltip="{{ manufacturer_part.manufacturer.get_approval_status_display|default:'Probation / Unassessed' }}">help_outline</i>
                        {% endif %}
                    {% endif %}
                    </td>
                {% endif %}
                {% if show_part %}<td><a href="{% url 'bom:part-info' part_id=manufacturer_part.part_id %}">{{ manufacturer_part.part }}</a></td>{% endif %}

                <td id="sourcing-mp-{{ manufacturer_part.id }}-name">
                    {% with seller=manufacturer_part.optimal_seller.seller %}
                        {% if seller %}
                            <a href="{% url 'bom:seller-info' seller_id=seller.id %}">{{ seller.name }}</a>
                        {% endif %}
                        {% if seller.approval_status == 'A' %}
                            <i class="material-icons green-text tiny tooltipped" data-position="right"
                               data-tooltip="{{ seller.get_approval_status_display }}">check_circle</i>
                        {% elif seller.approval_status == 'R' %}
                            <i class="material-icons red-text tiny tooltipped" data-position="right"
                               data-tooltip="{{ seller.get_approval_status_display }}">block</i>
                        {% else %}
                            <i class="material-icons grey-text text-lighten-1 tiny tooltipped"
                               data-position="right"
                               data-tooltip="{{ seller.get_approval_status_display|default:'Probation / Unassessed' }}">help_outline</i>
                        {% endif %}
                    {% endwith %}
                </td>

                <td id="sourcing-mp-{{ manufacturer_part.id }}-pn">{{ manufacturer_part.optimal_seller.seller_part_number }}</td>
                <td id="sourcing-mp-{{ manufacturer_part.id }}-moq">{{ manufacturer_part.optimal_seller.minimum_order_quantity }}</td>
                <td id="sourcing-mp-{{ manufacturer_part.id }}-mpq">{{ manufacturer_part.optimal_seller.minimum_pack_quantity }}</td>
                <td id="sourcing-mp-{{ manufacturer_part.id }}-cost">{{ manufacturer_part.optimal_seller.unit_cost }}</td>
                <td id="sourcing-mp-{{ manufacturer_part.id }}-lt">{{ manufacturer_part.optimal_seller.lead_time_days }}</td>
                <td id="sourcing-mp-{{ manufacturer_part.id }}-nre">{{ manufacturer_part.optimal_seller.nre_cost }}</td>
                <td id="sourcing-mp-{{ manufacturer_part.id }}-ncnr">{{ manufacturer_part.optimal_seller.ncnr }}</td>
                <td>
                    {% if perms.bom_manage_sourcing %}
                        <a class='dropdown-trigger' href='#' data-target='dropdown{{ manufacturer_part.id }}'><i
                                class="material-icons right green-text lighten-1">more_horiz</i></a>
                        <ul id='dropdown{{ manufacturer_part.id }}' class='dropdown-content'>
                            <li><a class="green-text text-lighten-1"
                                   href="{% url 'bom:manufacturer-part-edit' manufacturer_part_id=manufacturer_part.id %}"><i
                                    class="material-icons green-text text-lighten-1">edit</i>edit</a></li>
                            <li><a class="green-text text-lighten-1"
                                   href="{% url 'bom:manufacturer-part-add-sellerpart' manufacturer_part_id=manufacturer_part.id %}"><i
                                    class="material-icons green-text text-lighten-1">add</i>add vendor part</a>
                            </li>
                            <li class="divider" tabindex="-1"></li>
                            <li><a class="red-text text-lighten-1"
                                   href="{% url 'bom:manufacturer-part-delete' manufacturer_part_id=manufacturer_part.id %}"><i
                                    class="material-icons red-text text-lighten-1">delete_forever</i>delete</a>
                            </li>
                        </ul>
                    {% endif %}
                </td>
            </tr>

            {% for seller_part in manufacturer_part.seller_parts %}
                <tr data-tt-id="0" data-tt-parent-id="{{ manufacturer_part.id }}" {% if forloop.last %}id="sourcing-{{ manufacturer_part.id }}-last"{% endif %}>
                    <td></td>
                    <td></td>
                    <td>
                        {% if seller_part.link %}<a href="{{ seller_part.link }}" target="_blank">{% endif %}
                        {{ seller_part.seller.name }}
                        {% if seller_part.link %}&nbsp;
                            <i class="material-icons" style="font-size: 14px;">open_in_new</i></a>{% endif %}

                        {% if seller_part.seller.approval_status == 'A' %}
                            <i class="material-icons green-text tiny tooltipped" data-position="right"
                               data-tooltip="Approved Vendor">check_circle</i>
                        {% elif seller_part.seller.approval_status == 'R' %}
                            <i class="material-icons red-text tiny tooltipped" data-position="right"
                               data-tooltip="Restricted Vendor">block</i>
                        {% endif %}
                    </td>
                    <td>{{ seller_part.seller_part_number }}</td>
                    <td>{{ seller_part.minimum_order_quantity }}</td>
                    <td>{{ seller_part.minimum_pack_quantity }}</td>
                    <td>{{ seller_part.unit_cost }}</td>
                    <td>{{ seller_part.lead_time_days }}</td>
                    <td>{{ seller_part.nre_cost }}</td>
                    <td>{{ seller_part.ncnr }}</td>
                    <td>{% if perms.bom.manage_sourcing %}
                        <a href="{% url 'bom:seller-part-edit' seller_part_id=seller_part.id %}">edit</a> |
                        <a href="{% url 'bom:seller-part-delete' seller_part_id=seller_part.id %}">delete</a>
                    {% endif %}</td>
                </tr>
            {% empty %}
                <tr data-tt-id="0" data-tt-parent-id="{{ manufacturer_part.id }}">
                    <td colspan="99" style="text-align: center;"><i>This manufacturer part has no vendors entered
                        yet.</i></td>
                </tr>
            {% endfor %}
        {% empty %}
            <tr>
                <td colspan="99" style="text-align: center; height: 20vh;"><i>None found.</i></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<script src="{% static 'bom/js/jquery.treetable.js' %}"></script>
<script>
    $("#manufacturer-parts").treetable({
        expandable: true,
        indent: 2,
        initialState: 'collapsed',
    });
</script>
<script type="text/javascript" src="{% static 'bom/js/jquery.ba-floatingscrollbar.min.js' %}"></script>
<script>
    $(function () {
        $('.responsive-table-wrapper').floatingScrollbar();
        $('.tooltipped').tooltip();
    });
</script>