{# To include this widget, make sure to pass: `manufacturer_parts`, `profile`, (optional, for mouser) `part_revision` variables  #}
{% load static %}

<style>
    .mfr-part-card {
        padding: 0;
        margin: 12px 0;
    }

    .mfr-part-card-header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px 16px;
        padding: 12px 16px;
        border-bottom: 1px solid #e0e0e0;
    }

    .mfr-part-identity {
        min-width: 0;
    }

    .mfr-part-mpn {
        font-size: 1.15rem;
        font-weight: 500;
        word-break: break-word;
    }

    .mfr-part-mpn .material-icons {
        font-size: 14px;
        vertical-align: middle;
    }

    .mfr-part-meta,
    .mfr-part-best {
        font-size: 0.9rem;
        margin-top: 4px;
    }

    .mfr-part-actions {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .mfr-vendor-table {
        margin: 0;
    }

    /* Equal padding between the vendor table and the card border on all sides. */
    .mfr-part-card .responsive-table-wrapper {
        padding: 12px;
    }

    /* Footer "add a row" link -- inherits .tight td padding so it reads at the same row
       thickness as the vendor rows above it. */
    .add-vendor-link {
        display: block;
        text-align: center;
        font-weight: 500;
        padding: 6px 4px;
    }

    .add-vendor-link:hover {
        background-color: #f5f5f5;
    }

    .add-vendor-link .material-icons {
        font-size: 1rem;
        vertical-align: middle;
        margin-right: 4px;
    }
</style>

{% for manufacturer_part in manufacturer_parts %}
    <div class="card mfr-part-card" id="sourcing-mp-{{ manufacturer_part.id }}">
        <div class="mfr-part-card-header">
            <div class="mfr-part-identity">
                <span class="eyebrow">MPN</span>
                <span class="mfr-part-mpn">
                    {% 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">open_in_new</i></a>{% endif %}
                </span>
                <div class="mfr-part-meta inline-meta grey-text text-darken-2">
                    {% if show_manufacturer and manufacturer_part.manufacturer %}
                        <span>
                            <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 %}
                        </span>
                    {% endif %}
                    {% if show_part %}
                        <span><a
                                href="{% url 'bom:part-info' part_id=manufacturer_part.part_id %}">{{ manufacturer_part.part }}</a></span>
                    {% endif %}
                </div>
                {% if manufacturer_part.optimal_seller.seller or part_revision %}
                    <div class="mfr-part-best grey-text text-darken-2">
                        <span class="eyebrow">Best price</span>
                        {% with seller=manufacturer_part.optimal_seller.seller %}
                            <span id="sourcing-mp-{{ manufacturer_part.id }}-name">
                                {% if seller %}
                                    <a href="{% url 'bom:seller-info' seller_id=seller.id %}">{{ seller.name }}</a>
                                    {% 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>
                                    {% endif %}
                                    {% else %}&mdash;{% endif %}
                            </span>
                            <span id="sourcing-mp-{{ manufacturer_part.id }}-cost">{{ manufacturer_part.optimal_seller.unit_cost }}</span>
                            {% if manufacturer_part.optimal_seller.seller_part_number %}&middot; {% endif %}
                            <span id="sourcing-mp-{{ manufacturer_part.id }}-pn">{{ manufacturer_part.optimal_seller.seller_part_number }}</span>
                            {% if manufacturer_part.optimal_seller.minimum_order_quantity %}&middot;MOQ {% endif %}
                            <span id="sourcing-mp-{{ manufacturer_part.id }}-moq">{{ manufacturer_part.optimal_seller.minimum_order_quantity }}</span>
                            {% if manufacturer_part.optimal_seller.lead_time_days %}&middot;
                                <span id="sourcing-mp-{{ manufacturer_part.id }}-lt">{{ manufacturer_part.optimal_seller.lead_time_days }}</span>
                                days{% else %}<span id="sourcing-mp-{{ manufacturer_part.id }}-lt"></span>{% endif %}
                        {% endwith %}
                    </div>
                {% endif %}
            </div>

            {% if perms.bom.manage_sourcing %}
                <div class="mfr-part-actions">
                    <a class='dropdown-trigger-manufacturer' href='#' data-target='dropdown{{ manufacturer_part.id }}'>
                        <i class="material-icons green-text text-lighten-1">more_vert</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 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>
                </div>
            {% endif %}
        </div>

        <div class="responsive-table-wrapper">
            <table class="mfr-vendor-table highlight part-list tight single-line">
                <thead>
                <tr>
                    <th class="text-normal">Vendor</th>
                    <th class="text-normal">PN</th>
                    <th class="text-normal">MOQ</th>
                    <th class="text-normal">MPQ</th>
                    <th class="text-normal">Price</th>
                    <th class="text-normal">Lead Time (days)</th>
                    <th class="text-normal">NRE</th>
                    <th class="text-normal">NCNR</th>
                    <th class="text-normal">Manage</th>
                </tr>
                </thead>
                <tbody id="vendor-rows-{{ manufacturer_part.id }}">
                {% for seller_part in manufacturer_part.seller_parts %}
                    <tr>
                        <td class="text-normal">
                            {% 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 class="text-normal">{{ seller_part.seller_part_number }}</td>
                        <td class="text-normal">{{ seller_part.minimum_order_quantity }}</td>
                        <td class="text-normal">{{ seller_part.minimum_pack_quantity }}</td>
                        <td class="text-normal">
                            {{ seller_part.unit_cost }}
                            {% if seller_part.unit_cost_normalized %}
                                <br>
                                <span class="text-small grey-text">({{ seller_part.unit_cost_normalized }})</span>
                            {% endif %}
                        </td>
                        <td class="text-normal">{{ seller_part.lead_time_days }}</td>
                        <td class="text-normal">
                            {{ seller_part.nre_cost }}
                            {% if seller_part.nre_cost_normalized %}
                                <br>
                                <span class="text-small grey-text">({{ seller_part.nre_cost_normalized }})</span>
                            {% endif %}
                        </td>
                        <td class="text-normal">{% if seller_part.ncnr %}Yes{% else %}No{% endif %}</td>
                        <td class="text-normal">{% 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 class="no-vendors-row">
                        <td class="text-normal text-center grey-text" colspan="9"><i>No vendors entered yet.</i></td>
                    </tr>
                {% endfor %}
                </tbody>
                {% if perms.bom.manage_sourcing %}
                    <tfoot>
                    <tr>
                        <td colspan="9" style="padding: 0;"><a class="add-vendor-link green-text text-lighten-1"
                                                               href="{% url 'bom:manufacturer-part-add-sellerpart' manufacturer_part_id=manufacturer_part.id %}"><i
                                class="material-icons">add</i>Add vendor part</a></td>
                    </tr>
                    </tfoot>
                {% endif %}
            </table>
        </div>
    </div>
{% empty %}
    <div class="card-panel center-align grey-text"><i>None found.</i></div>
{% endfor %}

<!-- Floating Horizontal Scrollbar (each vendor table scrolls independently on narrow screens) -->
<script type="text/javascript" src="{% static 'bom/js/jquery.ba-floatingscrollbar.min.js' %}"></script>
<script>
    $(function () {
        $('.responsive-table-wrapper').floatingScrollbar();
        $('.tooltipped').tooltip();
    });

    // For dropdown menu
    $(document).ready(function () {
        $('.dropdown-trigger-manufacturer').dropdown({
                inDuration: 300,
                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: 'right',
                stopPropagation: false, // Stops event propagation
                coverTrigger: false
            }
        );
    });
</script>