{% extends 'bom/bom-base.html' %}

{% load static %}
{% load djmoney %}

{% block head-title %}{{ part.full_part_number }}{% if part_revision %} {{ part_revision.synopsis }}{% endif %}{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/part-info.css' %}"/>
    <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 %}

{% block content %}
    {% include 'bom/bom-action-btn.html' with profile=profile %}
    <div class="container-app">
        <div class="part-info">
            <div class="part-header printer-hide">
                <div class="part-identity">
                    <div class="part-identity-media">
                        {% if part.image %}
                            <div class="part-thumb{% if perms.bom.edit_part %} modal-trigger{% endif %}"{% if perms.bom.edit_part %} data-target="part-image-modal"{% endif %}>
                                <img src="{{ part.image.url }}" alt="Picture of {{ part.full_part_number }}">
                                {% if perms.bom.edit_part %}<span class="part-thumb-hint"><i class="material-icons">photo_camera</i></span>{% endif %}
                            </div>
                        {% elif perms.bom.edit_part %}
                            <a class="part-thumb part-thumb-empty modal-trigger" data-target="part-image-modal">
                                <i class="material-icons">add_a_photo</i>
                                <span>Add photo</span>
                            </a>
                        {% else %}
                            <div class="part-thumb part-thumb-empty">
                                <i class="material-icons">image</i>
                            </div>
                        {% endif %}
                    </div>
                    <div class="part-identity-body">
                        <span class="eyebrow">Part</span>
                        <h1 class="part-number">{{ part.full_part_number }}</h1>
                        <div class="part-identity-meta inline-meta">
                            {% if organization.number_scheme == 'S' and part.number_class %}<span title="{{ part.number_class }}">Class {{ part.number_class.code }}</span>{% endif %}
                            {% if part.primary_manufacturer_part.manufacturer_part_number %}<span>{{ part.primary_manufacturer_part.manufacturer.name }} {{ part.primary_manufacturer_part.manufacturer_part_number }}</span>{% endif %}
                        </div>
                    </div>
                </div>

                <div class="part-revision-controls">
                    {% if part_revision %}
                        <span class="eyebrow">Revision</span>
                        <div class="revision-selector-row">
                            <div class="input-field revision-select-wrapper">
                                <select id="select-revision">
                                    {% for r in revisions.all %}
                                        <!--@formatter:off-->
                                        <option {% if part_revision.id == r.id %}selected{% endif %} value="{% if r == part.latest %}{% url 'bom:part-info' part_id=part.id %}{% else %}{% url 'bom:part-info-history' part_id=part.id part_revision_id=r.id %}{% endif %}">Rev {{ r.revision }}{% if part_revision.id != r.id %} ({{ r.get_configuration_display }}){% endif %}</option>
                                        <!--@formatter:on-->
                                    {% endfor %}
                                </select>
                            </div>
                            <span class="chip
                                {% if part_revision.configuration == 'D' %}grey lighten-2 grey-text text-darken-2
                                {% elif part_revision.configuration == 'I' %}amber lighten-3 black-text
                                {% elif part_revision.configuration == 'R' %}teal darken-2 white-text
                                {% elif part_revision.configuration == 'O' %}red darken-1 white-text
                                {% else %}grey lighten-4
                                {% endif %}">
                                {{ part_revision.get_configuration_display }}
                            </span>
                            {% if revisions.count > 1 %}
                                <div class="input-field revision-select-wrapper">
                                    <select id="compare-revision">
                                        <option value="" disabled selected>Compare with&hellip;</option>
                                        {% for r in revisions.all %}{% if r.id != part_revision.id %}
                                            <option value="{% url 'bom:part-diff' part_id=part.id revision_a_id=r.id revision_b_id=part_revision.id %}">Rev {{ r.revision }} ({{ r.get_configuration_display }})</option>
                                        {% endif %}{% endfor %}
                                    </select>
                                </div>
                            {% endif %}
                            {% if perms.bom.edit_part %}
                                {% if part_revision.is_immutable %}
                                    <form method="post" action="{% url 'bom:part-revision-revise' part_id=part.id part_revision_id=part_revision.id %}">
                                        {% csrf_token %}
                                        <button type="submit" class="waves-effect waves-light btn green lighten-1"><i class="material-icons left">edit</i>Revise</button>
                                    </form>
                                {% else %}
                                    <a class="waves-effect waves-light btn green lighten-1" href="{% url 'bom:part-edit-revision' part_id=part.id part_revision_id=part_revision.id %}"><i class="material-icons left">edit</i>Edit</a>
                                {% endif %}
                                {% if part_revision.configuration == 'D' or part_revision.configuration == 'I' %}
                                    {% if perms.bom.release_revision %}
                                        <a class="waves-effect waves-light btn-flat" href="{% url 'bom:part-revision-release' part_id=part.id part_revision_id=part_revision.id %}">Release&hellip;</a>
                                    {% endif %}
                                {% endif %}
                                <div class="manage-btn-col">
                        <a class='dropdown-trigger' href='#' data-target='dropdown-revision' aria-label="More actions"><i
                                class="material-icons green-text text-lighten-1">more_horiz</i></a>
                        <ul id='dropdown-revision' class='dropdown-content'>
                            <li>
                                <a class="green-text text-lighten-1"
                                   href="{% url 'bom:part-revision-new' part_id=part.id %}">
                                    <i class="material-icons green-text text-lighten-1">add</i>New revision from this one</a>
                            </li>
                            {% with allowed=part_revision.get_allowed_transitions config='D' %}
                                {% if config in allowed or profile.role == 'A' and config != part_revision.configuration %}
                                    <li>
                                        <a class="{% if config in allowed %}green-text lighten-1{% else %}grey-text{% endif %}"
                                           onclick="changePartRevision('{{ config }}', {% if config in allowed %}true{% else %}false{% endif %})">
                                            <i class="material-icons {% if config in allowed %}green-text lighten-1{% else %}grey-text{% endif %}">undo</i>Revert
                                            to
                                            Draft</a>
                                    </li>
                                {% endif %}
                            {% endwith %}
                            {% with allowed=part_revision.get_allowed_transitions config='I' %}
                                {% if config in allowed or profile.role == 'A' and config != part_revision.configuration %}
                                    <li>
                                        <a class="{% if config in allowed %}green-text lighten-1{% else %}grey-text{% endif %}"
                                           onclick="changePartRevision('{{ config }}', {% if config in allowed %}true{% else %}false{% endif %})">
                                            <i class="material-icons {% if config in allowed %}green-text lighten-1{% else %}grey-text{% endif %}">group</i>Change
                                            to
                                            In Review</a>
                                    </li>
                                {% endif %}
                            {% endwith %}
                            {% if perms.bom.delete_revision or config in allowed and perms.bom.obsolete_revision or profile.role == 'A' and config != part_revision.configuration %}
                            <li class="divider" tabindex="-1"></li>
                            {% endif %}
                            {% with allowed=part_revision.get_allowed_transitions config='O' %}
                                {% if config in allowed and perms.bom.obsolete_revision or profile.role == 'A' and config != part_revision.configuration %}
                                    <li>
                                        <a class="{% if config in allowed %}orange-text{% else %}grey-text{% endif %}"
                                           onclick="changePartRevision('{{ config }}', {% if config in allowed %}true{% else %}false{% endif %})">
                                            <i class="material-icons {% if config in allowed %}orange-text{% else %}grey-text{% endif %}">block</i>Mark
                                            Obsolete</a>
                                    </li>
                                {% endif %}
                            {% endwith %}
                            <li class="divider" tabindex="-1"></li>
                            <li>
                                <a class="green-text text-lighten-1" href="{% url 'bom:part-edit' part_id=part.id %}">
                                    <i class="material-icons green-text text-lighten-1">edit</i>Edit part number and class</a>
                            </li>
                            <li>
                                <a class="green-text text-lighten-1 modal-trigger" data-target="part-image-modal">
                                    <i class="material-icons green-text text-lighten-1">photo_camera</i>Photo</a>
                            </li>
                            <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">download</i>Export BOM CSV</a>
                            </li>
                            {% if perms.bom.delete_revision %}
                            <li>
                                <a class="red-text text-lighten-1" onclick="deletePartRevision()">
                                    <i class="material-icons red-text text-lighten-1">delete</i>Delete</a>
                            </li>
                            {% endif %}
                        </ul>
                                </div>
                            {% endif %}
                        </div>
                    {% elif perms.bom.create_part %}
                        <a class='waves-effect waves-light btn-flat'
                           href='{% url 'bom:part-revision-new' part_id=part.id %}'><i class="material-icons left">add</i>Create Revision</a>
                    {% endif %}
                </div>
            </div>

            {% if proposals.changes %}
                <div class="card-panel deep-purple lighten-5 printer-hide">
                    {{ proposals.changes|length }} open change{{ proposals.changes|length|pluralize }} touch{{ proposals.changes|length|pluralize:"es," }} this revision:
                    {% for change in proposals.changes %}
                        <a href="{% url 'bom:change-review' number=change.number %}">#{{ change.number }} {{ change.title }}</a>{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
            <div class="row">
                <div class="col s12 printer-hide">
                    <ul id="tabs" class="tabs tabs-fixed-width">
                        <li class="tab"><a id="specs-tab" href="#specs">Specifications</a></li>
                        <li class="tab"><a id="bom-tab" href="#bom">Bill of Materials</a></li>
                        <li class="tab"><a id="used-tab" href="#used">Where Used</a></li>
                        <li class="tab"><a id="sourcing-tab" href="#sourcing">Sourcing</a></li>
                        <li class="tab"><a id="history-tab" href="#history">History</a></li>
                    </ul>
                </div>

                <div id="specs" class="col s12">
                    <h4 class="printer-show">Specifications</h4>
                    <br>
                    <ul class="collection with-header">
                        <li class="collection-header"><h5>Item Details</h5></li>
                        <li class="collection-item">
                            {% if organization.number_scheme == 'S' %}
                                <div class="row">
                                    <div class="col s4 l2 text-right" style="padding-left: 0px;">Item Class:</div>
                                    <div class="col s8 l10">{{ part.number_class }}</div>
                                </div>
                            {% endif %}
                            <div class="row">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Number:</div>
                                <div class="col s8 l10">{{ part.full_part_number }}</div>
                            </div>
                            <div class="row">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Synopsis:</div>
                                <div class="col s8 l10">{{ part_revision.synopsis }}</div>
                            </div>
                            <div class="row">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Configuration:</div>
                                <div class="col s8 l10">{{ part_revision.get_configuration_display|default:'n/a' }}&nbsp;<i>{% if part_revision %}(as of <span id="specs-revision-timestamp"></span>
                                    ){% endif %}
                                </i></div>
                            </div>
                            {% for property in part_revision.properties.all %}
                                <div class="row">
                                    <div class="col s4 l2 text-right"
                                         style="padding-left: 0px;">{{ property.property_definition.name }}:
                                    </div>
                                    <div class="col s8 l10">{{ property.value_raw }}{% if property.unit_definition %}
                                        {{ property.unit_definition.symbol }}{% endif %}</div>
                                </div>
                            {% endfor %}
                            <div class="row">
                                <div class="col s4 l2 text-right" style="padding-left: 0;">
                                    <img title="Via Google Drive" style="width: 16px;"
                                         src="{% static 'bom/img/google_drive_logo.png' %}">&nbsp;Files:
                                </div>
                                <div class="col s8 l10"><a href="{% url 'google-drive:add-folder' part_id=part.id %}" target="_blank">Open Folder</a></div>
                            </div>
                            <div class="row">
                                <div id="sourcing-data-sheet-wrapper" style="{% if not part.primary_manufacturer_part.datasheet_url %}display: none; {% endif %}min-height: 22px;">
                                    <div class="col s4 l2 text-right" style="padding-left: 0;">
                                        <i class="material-icons" style="font-size: 16px; vertical-align: text-bottom;">description</i>&nbsp;Datasheets
                                    </div>
                                    <div class="col s8 l10"><a id="sourcing-data-sheet" target="_blank"
                                        {% if part.primary_manufacturer_part.datasheet_url %}href="{{ part.primary_manufacturer_part.datasheet_url }}"{% endif %}>View
                                        datasheet</a></div>
                                </div>
                            </div>
                            {% if part.primary_manufacturer_part.manufacturer_part_number %}
                                <div class="row">
                                    <div class="col s4 l2 text-right" style="padding-left: 0;">
                                        <i class="material-icons" style="font-size: 16px; vertical-align: text-bottom;">search</i>&nbsp;Octopart:
                                    </div>
                                    <div class="col s8 l10">
                                        <a href="https://octopart.com/search?q={{ part.primary_manufacturer_part.manufacturer_part_number|urlencode }}"
                                           target="_blank" rel="noopener">Find datasheet &amp; sourcing&nbsp;<i
                                                class="material-icons" style="font-size: 14px;">open_in_new</i></a>
                                    </div>
                                </div>
                            {% endif %}
                        </li>
                        <li class="collection-header">
                            <h5><h5 class="title">Manufacturer & Sourcing</h5></h5>
                        </li>
                        <li class="collection-item">
                            <div class="row">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Primary Manufacturer Part:</div>
                                <div class="col s8 l10">{% if part.primary_manufacturer_part.link %}<a href="{{ part.primary_manufacturer_part.link }}" target="_blank">{% endif %}{{ part.primary_manufacturer_part.manufacturer.name }} - {{ part.primary_manufacturer_part.manufacturer_part_number }}{% if part.primary_manufacturer_part.link %}&nbsp;<i class="material-icons" style="font-size: 14px;">open_in_new</i></a>{% endif %}
                                    {% if perms.bom.edit_part and part_revision and not part_revision.is_immutable %}
                                        <a href="{% url 'bom:part-edit-revision' part_id=part.id part_revision_id=part_revision.id %}#manufacturer-parts">&nbsp;manage</a>
                                    {% endif %}
                                </div>
                            </div>
                            <!-- One section = the quote. Each figure is marked ⚡ when it's live from a
                                 distributor (hover for source); your stored data shows unmarked. Live-only
                                 extras (lead time, stock, vendor count) fill in via JS when available. -->
                            {% if part_revision %}
                                <div class="row printer-hide">
                                    <div class="col s4 l2 text-right" style="padding-left: 0px;">Quote Quantity:</div>
                                    <div class="col s8 l10">
                                        <form action="{% url 'bom:part-info' part_id=part.id %}" method="post" class="quote-qty-form">
                                            {% csrf_token %}
                                            {{ part_info_form.quantity }}
                                            <button type="submit" class="waves-effect waves-green btn-flat btn-icon-round quote-qty-refresh"
                                                    title="Recalculate at this quantity"><i class="material-icons green-text">refresh</i></button>
                                        </form>
                                    </div>
                                </div>
                            {% endif %}
                            {% if sourcing_parts %}
                                <div class="row printer-hide" id="sourcing-fetch-row">
                                    <div class="col s4 l2 text-right" style="padding-left: 0px;">Live Pricing:</div>
                                    <div class="col s8 l10">
                                        <a id="sourcing-fetch-button" class="waves-effect waves-green btn-flat"
                                           style="padding: 0 12px;">
                                            <i class="material-icons left green-text"
                                               style="margin-right: 6px;">bolt</i>Get live pricing</a>
                                        <span id="sourcing-fetch-status" class="grey-text"></span>
                                    </div>
                                </div>
                            {% endif %}
                            <div class="row">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Quote Unit Cost:</div>
                                <div id="specs-unit-cost" class="col s8 l10"><span id="sourcing-est-cost">{{ indented_bom.unit_cost|default_if_none:'-' }}</span><i
                                        id="sourcing-est-cost-live" class="material-icons teal-text text-darken-1 tooltipped sourcing-live-marker"
                                        style="display: none; font-size: 14px; vertical-align: text-bottom; cursor: help;"
                                        data-position="right" data-tooltip="">bolt</i><span id="sourcing-quote-vendor" class="grey-text"></span></div>
                            </div>
                            <div class="row">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Quote Total NRE:</div>
                                <div class="col s8 l10"><span id="sourcing-est-nre">{{ indented_bom.nre|default_if_none:'-' }}</span></div>
                            </div>
                            <div class="row">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Order Total (w/ MOQs):</div>
                                <div class="col s8 l10"><span id="sourcing-est-cost-per-order">{{ indented_bom.out_of_pocket_cost|default_if_none:'-' }}</span><i
                                        id="sourcing-est-cost-per-order-live" class="material-icons teal-text text-darken-1 tooltipped sourcing-live-marker"
                                        style="display: none; font-size: 14px; vertical-align: text-bottom; cursor: help;"
                                        data-position="right" data-tooltip="">bolt</i></div>
                            </div>
                            <div class="row">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Subparts without costs:</div>
                                <div class="col s8 l10"><span id="sourcing-missing-item-costs">{{ indented_bom.missing_item_costs }}</span></div>
                            </div>
                            <div class="row" id="sourcing-lead-time-wrapper" style="display: none;">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Lead time (days):</div>
                                <div class="col s8 l10"><span id="sourcing-lead-time"></span></div>
                            </div>
                            <div class="row" id="sourcing-stock-wrapper" style="display: none;">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">In stock:</div>
                                <div class="col s8 l10"><span id="sourcing-stock"></span></div>
                            </div>
                            <div class="row" id="sourcing-near-match-wrapper" style="display: none;">
                                <div class="col s4 l2 text-right amber-text text-darken-2" style="padding-left: 0px;">Match:</div>
                                <div class="col s8 l10 amber-text text-darken-2">Near match — pricing is for
                                    <span id="sourcing-near-match"></span>, not the exact part number.</div>
                            </div>
                            <div class="row" id="sourcing-unavailable-wrapper" style="display: none;">
                                <div class="col s4 l2 text-right amber-text text-darken-2" style="padding-left: 0px;">
                                    <i class="material-icons" style="font-size: 16px; vertical-align: text-bottom;">info_outline</i>&nbsp;Status:
                                </div>
                                <div class="col s8 l10 amber-text text-darken-2"><span id="sourcing-unavailable"></span></div>
                            </div>
                            <div class="row" id="sourcing-similar-wrapper" style="display: none;">
                                <div class="col s12 grey-text" style="font-size: 0.9em;"><span id="sourcing-similar"></span></div>
                            </div>
                            <div class="row" id="sourcing-vendors-wrapper" style="display: none;">
                                <div class="col s12 grey-text" style="font-size: 0.9em;"><span id="sourcing-vendors"></span></div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div id="bom" class="col s12">
                    <h4 class="printer-show">Bill of Materials</h4>
                    <div id="bom-indented">
                        <div class="text-center" style="padding-top: 8px;">
                            <span>Indented</span> | <a onclick="showFlatBOM()" href="#">Flat</a>
                        </div>
                        {% include 'bom/components/bom-indented.html' with order_by=order_by bom_items=indented_bom.parts part=part part_revision=part_revision profile=profile %}
                    </div>
                    <div id="bom-flat" style="display: none;">
                        <div class="text-center" style="padding-top: 8px;">
                            <a onclick="showIndentedBOM()" href="#">Indented</a> | <span>Flat</span>
                        </div>
                        {% include 'bom/components/bom-flat.html' with order_by=order_by bom_items=flat_bom.parts part=part part_revision=part_revision profile=profile %}
                    </div>
                </div>

                <div id="used" class="col s12">
                    <h4 class="printer-show">Where Used</h4>
                    <div id="where-used-revision">
                        <div class="text-center" style="padding-top: 8px;">
                            <span>This Revision</span> | <a onclick="showWholePartWhereUsed()" href="#">All
                            Revisions</a>
                        </div>
                        {% include 'bom/components/where-used-tree.html' with where_used_items=where_used.items table_id='where-used-revision-table' %}
                    </div>
                    <div id="where-used-whole-part" style="display: none;">
                        <div class="text-center" style="padding-top: 8px;">
                            <a onclick="showRevisionWhereUsed()" href="#">This Revision</a> | <span>All Revisions</span>
                        </div>
                        {% include 'bom/components/where-used-tree.html' with where_used_items=where_used_part.items table_id='where-used-whole-part-table' %}
                    </div>
                </div>

                <div id="history" class="col s12">
                    <h4 class="printer-show">History</h4>
                    <div class="responsive-table-wrapper">
                        <table class="highlight tight">
                            <thead><tr><th>When</th><th>Who</th><th>What</th></tr></thead>
                            <tbody>
                            {% for entry in history_entries %}
                                {% with change=entry.change %}
                                    <tr>
                                        <td>{{ change.resolved_at|date:"Y-m-d H:i" }}</td>
                                        <td>
                                            {% if change.api_token %}
                                                <span class="chip">{% if change.agent_client %}{{ change.agent_client }} &middot; {% endif %}{{ change.api_token.name }}</span> for {{ change.author.username }}
                                            {% else %}
                                                {{ change.author.username }}
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if change.number %}
                                                <a href="{% url 'bom:change-review' number=change.number %}">{{ change.title }}</a>
                                                <small class="grey-text">#{{ change.number }}</small>
                                            {% else %}
                                                {{ change.title }}
                                            {% endif %}
                                            {% if entry.diff_revision_ids %}
                                                <a href="{% url 'bom:part-diff' part_id=part.id revision_a_id=entry.diff_revision_ids.0 revision_b_id=entry.diff_revision_ids.1 %}">Compare</a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endwith %}
                            {% empty %}
                                <tr><td colspan="3" class="center-align grey-text">No history yet.</td></tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="sourcing" class="col s12">
                    <h4 class="printer-show">Sourcing</h4>
                    {% include 'bom/components/manufacturer-part-list.html' with manufacturer_parts=part.manufacturer_parts part_revision=part_revision profile=profile show_manufacturer=True %}
                    {% for item in proposals.seller_items %}
                        <p style="opacity: 0.6;"><span class="chip">Proposed</span> {{ item.summary }}
                            <a href="{% url 'bom:change-review' number=item.change.number %}">Change #{{ item.change.number }}</a></p>
                    {% endfor %}
                    {% if perms.bom.manage_sourcing %}
                        <div class="row" style="padding-top: 16px;">
                            <div class="col s12 center-align">
                                <a class="waves-effect waves-green btn-flat"
                                   href="{% url 'bom:part-add-manufacturer-part' part_id=part.id %}" style="margin: 10px;">Add Manufacturer Part</a>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if perms.bom.edit_part %}
        <div id="part-image-modal" class="modal">
            <div class="modal-content">
                <h5 style="margin-top: 0;">Part picture</h5>
                <p class="grey-text">A photo to help identify {{ part.full_part_number }} at a glance.</p>
                {% if part.image %}
                    <div class="center-align" style="margin: 16px 0;">
                        <img src="{{ part.image.url }}" alt="Current part picture"
                             style="max-width: 100%; max-height: 240px; border-radius: 4px;">
                    </div>
                {% endif %}
                <form action="{% url 'bom:part-image-upload' part_id=part.id %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="file-field input-field">
                        <div class="btn btn-primary">
                            <span>{% if part.image %}Replace{% else %}Choose{% endif %}</span>
                            <input type="file" name="image" accept="image/*" required>
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text" placeholder="Select an image">
                        </div>
                    </div>
                    <div class="modal-footer" style="padding: 0;">
                        {% if part.image %}
                            <a href="{% url 'bom:part-image-delete' part_id=part.id %}"
                               onclick="return confirm('Remove this part picture?');"
                               class="waves-effect btn-flat red-text left">Remove</a>
                        {% endif %}
                        <a href="#!" class="modal-close waves-effect btn-flat">Cancel</a>
                        <button type="submit" class="waves-effect waves-light btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    {% endif %}
{% endblock %}
{% block bom-script %}
    <!-- Materialize initializer -->
    <script>
        $(document).ready(function () {
            $('.collapsible').collapsible({
                accordion: false
            });
        });
        var elem = document.querySelector('.collapsible.expandable');
        var instance = M.Collapsible.init(elem, {
            accordion: false
        });
    </script>

    <!-- Handle if there's an anchor, select tab -->
    <script type='text/javascript'>
        var tabsElem = document.querySelector('.tabs');

        {% if tab_anchor %}
            $('#{{ tab_anchor }}-tab').addClass('active');
        {% endif %}

        var tabs = M.Tabs.init(tabsElem);

        // Part picture upload/replace/remove modal
        $(document).ready(function () {
            M.Modal.init(document.querySelectorAll('.modal'));
        });

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

            {% if not tab_anchor %}
                if (window.localStorage['part-info-last-anchor']) {
                    {#tabs.select(window.localStorage['part-info-last-anchor']);#}
                }
            {% endif %}
        });
    </script>

    <script src="{% static 'bom/js/jquery.treetable.js' %}"></script>

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

    <!-- For revision selector logic -->
    <script>
        var selectRevisionSelectedIndex = 1;
        $(document).ready(function () {
            selectRevisionSelectedIndex = $("#select-revision")[0].selectedIndex;
        });

        $("#compare-revision").on('change', function () {
            window.location.href = this.value;
        });

        $("#select-revision").on('change', function () {
            var url = $(this)[0].value;
            var selectedIndex = $(this)[0].selectedIndex;
            if (selectedIndex === 0) {
                var value = "{% if revision == part.latest %}{% url 'bom:part-info' part_id=part.id %}{% else %}{% url 'bom:part-info-history' part_id=part.id part_revision_id=part_revision.id %}{% endif %}";
                $("#select-revision")[0].selectedIndex = selectRevisionSelectedIndex;
                $("#select-revision").formSelect();
            }
            window.location.href = url;
        });
    </script>

    <!-- Revision timestamp to local time -->
    <script>
        $(document).ready(function () {
            let revision_configuration_date = new Date("{{ part_revision.timestamp.isoformat }}")
            $("#specs-revision-timestamp").text(revision_configuration_date.toLocaleString());
        })
    </script>

    <!-- Confirmation popups?  -->
    <script>
        function deletePartRevision() {
            {% if part_revision is not None %}
                let url = "{% url 'bom:part-revision-delete' part_id=part.id part_revision_id=part_revision.id %}";
                if (confirm("Are you sure you want to delete this revision?\n\nIt will be deleted permanently.")) {
                    window.location.href = url;
                }
            {% else %}
                confirm("No part revisions to delete!");
            {% endif %}
        }

        function changePartRevision(c, allowed) {
            {% if part_revision is not None %}
                var url = "{% url 'bom:part-revision-draft' part_id=part.id part_revision_id=part_revision.id %}";
                var confirmText = "Are you sure you want to revert this revision to Draft?\n\n";
                if (c == 'I') {
                    url = "{% url 'bom:part-revision-review' part_id=part.id part_revision_id=part_revision.id %}";
                    confirmText = "Are you sure you want to change this revision to In Review?\n\n";
                } else if (c == 'R') {
                    url = "{% url 'bom:part-revision-release' part_id=part.id part_revision_id=part_revision.id %}";
                    window.location.href = url;
                    return;
                } else if (c == 'O') {
                    url = "{% url 'bom:part-revision-obsolete' part_id=part.id part_revision_id=part_revision.id %}";
                    confirmText = "Are you sure you want to change this revision to Obsolete?\n\nThis can't be undone. Obsolete revisions can't be edited or moved back to Draft, In Review, or Released, except by an organization admin.\n\n";
                }
                if (!allowed) {
                    confirmText += "WARNING! Transition is not valid, but you have permissions to make the change anyways. Proceed with caution.\n\n";
                }
                if (confirm(confirmText)) {
                    window.location.href = url;
                }
            {% else %}
                confirm("No part revisions to change!");
            {% endif %}
        }
    </script>

    <script>
        function showFlatBOM() {
            $('#bom-indented').hide();
            $('#bom-flat').show();
        }

        function showIndentedBOM() {
            $('#bom-flat').hide();
            $('#bom-indented').show();
        }

        function showRevisionWhereUsed() {
            $('#where-used-whole-part').hide();
            $('#where-used-revision').show();
        }

        function showWholePartWhereUsed() {
            $('#where-used-revision').hide();
            $('#where-used-whole-part').show();
        }
    </script>

    <!-- Live sourcing: the server is the source of truth for pricing; the browser just asks for it
         once, when the user clicks, and renders the response. -->
    <script>
        {% if part_revision.id and sourcing_parts %}
        // Distributor pricing is live-only and never persisted. The server fetches it, normalizes
        // currency, and rolls up the costs; this script only renders what comes back -- there is no
        // pricing math on the client (that lives once, in Python).
        const currencyUnit = "{{ organization.currency }}" === "USD" ? "$" : "";
        const topLevelPartRevisionId = "{{ part_revision.id }}";
        const sourcingUrl = "{% url 'json:sourcing-match-bom' part_revision_id=part_revision.id %}";
        // The price-break ladder doesn't change with quantity, so insert it only once per MPN.
        const renderedBreaks = {};

        function currentQuantity() {
            const quantity = parseInt($('#id_quantity').val(), 10);
            return isNaN(quantity) || quantity < 1 ? 1 : quantity;
        }

        function fetchSourcing(quantity) {
            $('#sourcing-fetch-status').text('Fetching…');
            $.get(sourcingUrl + "?quantity=" + quantity, function (response) {
                const errors = response['errors'];
                if (errors && errors.length > 0) {
                    console.error(errors);
                    $('#sourcing-fetch-status').text('Live pricing unavailable.');
                    return;
                }
                $('#sourcing-fetch-row').remove();  // live figures are on the page now
                const content = response['content'];
                const flatBom = content['flat_bom'];
                if (flatBom) {
                    renderSourcing(content, flatBom);
                }
            });
        }

        function renderSourcing(content, flatBom) {
            const bomParts = flatBom['parts'];
            let anyLive = false;  // did any line's quote come from live distributor data?
            for (const prid in bomParts) {
                if (!bomParts.hasOwnProperty(prid)) continue;
                const part = bomParts[prid];
                if (part['api_info'] && part['seller_part']) {
                    if (isLiveSellerPart(part['seller_part'])) anyLive = true;
                    updateBomCell('#bom-indented', prid, part);
                    updateBomCell('#bom-flat', prid, part);
                }
            }

            // The quote is the best available across YOUR sourcing + live, rolled up server-side.
            setText('#sourcing-est-cost', currencyUnit + parseFloat(flatBom['unit_cost']).toFixed(4));
            setText('#sourcing-est-cost-per-order', currencyUnit + parseFloat(flatBom['out_of_pocket_cost']).toFixed(2));
            setText('#sourcing-est-nre', currencyUnit + parseFloat(flatBom['nre']).toFixed(4));
            setText('#sourcing-missing-item-costs', flatBom['missing_item_costs']);

            // Mark the quote figures that include live data so it's clear which came from the distributor.
            const liveTip = 'Includes live pricing from ' + (content['provider_label'] || '')
                + (content['fetched_at'] ? ' · as of ' + new Date(content['fetched_at']).toLocaleString() : '');
            updateLiveMarker('sourcing-est-cost-live', anyLive, liveTip);
            updateLiveMarker('sourcing-est-cost-per-order-live', anyLive, liveTip);

            updateQuoteDetails(content, bomParts);  // selected vendor + live extras, inline with the quote
            updateSourcingTab(bomParts);
            $('#indented-bom').trigger('update');
            $('#flat-bom').trigger('update');
        }

        function setText(selector, value) {
            $(selector).text(value === null || value === undefined ? '-' : value);
        }

        function capitalize(text) {
            return text ? text.charAt(0).toUpperCase() + text.slice(1) : '';
        }

        // Transient (live) seller parts have no primary key; saved (your) ones do.
        function isLiveSellerPart(sellerPart) {
            return sellerPart['id'] === null || sellerPart['id'] === undefined;
        }

        // The shared "this is live from the distributor" marker (native hover note). Takes the
        // user-facing provider label (e.g. "Octopart"), not the internal key.
        function liveBoltHtml(providerLabel) {
            return ' <i class="material-icons teal-text text-darken-1" style="font-size: 13px; vertical-align: text-bottom;"'
                + ' title="Live from ' + (providerLabel || '') + '">bolt</i>';
        }

        // Show/hide a ⚡ "this value is live" marker with a Materialize hover note.
        function updateLiveMarker(elementId, show, tooltip) {
            const element = document.getElementById(elementId);
            if (!element) return;
            const existing = M.Tooltip.getInstance(element);
            if (existing) existing.destroy();
            if (show) {
                element.setAttribute('data-tooltip', tooltip);
                element.style.display = '';
                M.Tooltip.init(element);
            } else {
                element.style.display = 'none';
            }
        }

        // Inline the live extras with the quote: the selected vendor, that vendor's lead time / stock,
        // a datasheet fallback, the match/availability status, and a vendor-count + attribution line.
        // No separate "from $X" price (that floor price ignores MOQ and confused the quote).
        function updateQuoteDetails(content, bomParts) {
            const topLine = bomParts[topLevelPartRevisionId];
            if (!topLine || !topLine['api_info']) return;
            const apiInfo = topLine['api_info'];
            const sellerPart = topLine['seller_part'];
            const provider = apiInfo['provider_label'] || content['provider_label'];

            // Which vendor the quote actually came from (+ its lead time / stock), linked to its page.
            if (sellerPart && sellerPart['data_source']) {
                const selected = (apiInfo['offers'] || []).find(function (o) { return o['seller'] === sellerPart['data_source']; });
                const url = selected && selected['product_detail_url'];
                const name = url ? '<a href="' + url + '" target="_blank">' + sellerPart['data_source'] + '</a>' : sellerPart['data_source'];
                $('#sourcing-quote-vendor').html(' &middot; ' + name);
                if (sellerPart['lead_time_days'] !== null && sellerPart['lead_time_days'] !== undefined) {
                    $('#sourcing-lead-time').html(sellerPart['lead_time_days'] + (isLiveSellerPart(sellerPart) ? liveBoltHtml(provider) : ''));
                    $('#sourcing-lead-time-wrapper').show();
                }
                if (selected && selected['stock'] !== null && selected['stock'] !== undefined) {
                    $('#sourcing-stock').html(selected['stock'] + liveBoltHtml(provider));
                    $('#sourcing-stock-wrapper').show();
                }
            }

            // Matched but no purchasable price (obsolete / region-restricted).
            if ((!apiInfo['price_breaks'] || apiInfo['price_breaks'].length === 0) && apiInfo['unavailable_reason']) {
                let html = apiInfo['unavailable_reason'];
                if (apiInfo['product_detail_url']) {
                    html += ' <a href="' + apiInfo['product_detail_url'] + '" target="_blank">View ↗</a>';
                }
                $('#sourcing-unavailable').html(html);
                $('#sourcing-unavailable-wrapper').show();
            }
            if (apiInfo['is_exact'] === false) {
                $('#sourcing-near-match').text(apiInfo['matched_mpn'] || 'a similar part');
                $('#sourcing-near-match-wrapper').show();
            }

            // Datasheet fallback: use the live one only if you haven't stored your own (in Item Details).
            const datasheet = $('#sourcing-data-sheet');
            if (apiInfo['data_sheet'] && !datasheet.attr('href')) {
                datasheet.attr('href', apiInfo['data_sheet']);
                datasheet.after(liveBoltHtml(provider));
                $('#sourcing-data-sheet-wrapper').show();
            }

            // Attribution + how many other vendors are available (pointer to the Sourcing tab).
            const vendorCount = (apiInfo['offers'] || []).filter(function (o) { return (o['price_breaks'] || []).length; }).length;
            if (vendorCount > 0) {
                const when = content['fetched_at'] ? ' · as of ' + new Date(content['fetched_at']).toLocaleString() : '';
                $('#sourcing-vendors').text(vendorCount + ' authorized vendor' + (vendorCount > 1 ? 's' : '')
                    + ' via ' + (provider || '') + when + ' — see the Sourcing tab');
                $('#sourcing-vendors-wrapper').show();
            }

            // The exact part has no authorized vendors, but similar parts do -- point the user at them.
            const similarCount = apiInfo['similar_vendor_count'] || 0;
            const similarUrl = apiInfo['similar_search_url'];
            if (similarCount > 0 && similarUrl) {
                $('#sourcing-similar').html('No authorized vendors for the exact part, but ' + similarCount
                    + ' authorized vendor' + (similarCount > 1 ? 's' : '') + ' for similar parts — '
                    + '<a href="' + similarUrl + '" target="_blank">view on ' + (provider || 'Octopart') + '</a>');
                $('#sourcing-similar-wrapper').show();
            }
        }

        function updateBomCell(basePrefix, prid, part) {
            const sellerPart = part['seller_part'];
            const apiInfo = part['api_info'];
            const fromLive = isLiveSellerPart(sellerPart);

            const unitCostElement = $(basePrefix + '-unit-cost-' + prid);
            if (unitCostElement.length) {
                const price = parseFloat(sellerPart['unit_cost']).toFixed(4);
                let priceHtml = fromLive && apiInfo['product_detail_url']
                    ? '<a href="' + apiInfo['product_detail_url'] + '" target="_blank">' + price + '</a>' : price;
                if (fromLive) priceHtml += liveBoltHtml(apiInfo['provider_label']);
                unitCostElement.html(priceHtml);
            }
            // Only relabel the vendor when the quote actually came from live data. A manual optimal
            // keeps its server-rendered vendor name -- we don't have its name client-side. Live lines
            // get a ⚡ marker (native hover note) so they read as live, not manually entered.
            if (fromLive) {
                const sellerNameElement = $(basePrefix + '-seller-name-' + prid);
                if (sellerNameElement.length) {
                    // The optimal seller part carries the actual winning vendor in data_source; prefer
                    // it over the primary offer so the vendor matches the displayed price.
                    let html = (sellerPart['data_source'] || apiInfo['seller'] || '') + liveBoltHtml(apiInfo['provider_label']);
                    if (apiInfo['is_exact'] === false) {
                        html += ' <span class="amber-text text-darken-2" style="font-size: 0.8em;" title="Near match: ' + (apiInfo['matched_mpn'] || '') + '">(near match)</span>';
                    }
                    sellerNameElement.html(html);
                }
            }
            setCellText($(basePrefix + '-ext-qty-' + prid), part['total_extended_quantity']);
            setCellText($(basePrefix + '-order-qty-' + prid), part['order_quantity']);
            const orderCost = part['order_cost'];
            setCellText($(basePrefix + '-ext-cost-' + prid),
                orderCost === null || orderCost === undefined ? null : currencyUnit + parseFloat(orderCost).toFixed(2));
        }

        function setCellText(element, value) {
            if (element.length === 0) return;
            element.text(value === null || value === undefined ? '-' : value);
        }

        // Light-touch update of the matched manufacturer part's optimal-seller row in the Sourcing tab.
        function updateSourcingTab(bomParts) {
            const topLine = bomParts[topLevelPartRevisionId];
            if (!topLine || !topLine['api_info']) return;
            const apiInfo = topLine['api_info'];
            const sellerPart = topLine['seller_part'];
            const manufacturerPartId = apiInfo['manufacturer_part_id'];
            if (!manufacturerPartId) return;
            const base = '#sourcing-mp-' + manufacturerPartId;
            if ($(base + '-name').length === 0) return;

            const nearMatch = apiInfo['is_exact'] === false
                ? ' <span class="amber-text text-darken-2" style="font-size: 0.8em;" title="Near match: ' + (apiInfo['matched_mpn'] || '') + '">(near match)</span>'
                : '';
            // Link the optimal vendor to its product page (match the chosen seller to its offer).
            const optimalName = (sellerPart && sellerPart['data_source']) || apiInfo['seller'] || '';
            const optimalOffer = (apiInfo['offers'] || []).find(function (o) { return o['seller'] === optimalName; });
            const optimalUrl = optimalOffer && optimalOffer['product_detail_url'];
            const optimalHtml = optimalUrl ? '<a href="' + optimalUrl + '" target="_blank">' + optimalName + '</a>' : optimalName;
            $(base + '-name').html(optimalHtml + liveBoltHtml(apiInfo['provider_label']) + nearMatch);
            $(base + '-pn').text(apiInfo['seller_part_number'] || '');
            if (apiInfo['lead_time_days'] !== null && apiInfo['lead_time_days'] !== undefined) {
                $(base + '-lt').text(apiInfo['lead_time_days']);
            }

            if (sellerPart) {
                $(base + '-moq').text(sellerPart['minimum_order_quantity']);
                $(base + '-cost').text(parseFloat(sellerPart['unit_cost']).toFixed(4));
            } else if (apiInfo['unavailable_reason']) {
                // Matched but no purchasable price -- show the reason where the price would be.
                $(base + '-cost').html('<span class="amber-text text-darken-2" title="' + apiInfo['unavailable_reason'] + '">No price</span>');
            }
            addLiveVendorRows(manufacturerPartId, apiInfo);
        }

        // Add every live distributor offer (Nexar aggregates many) as vendor rows in the manufacturer
        // part's card, one row per price break. Mirrors the seller-part rows so your sourcing and live
        // vendors read the same way.
        function addLiveVendorRows(manufacturerPartId, apiInfo) {
            const offers = apiInfo['offers'] || [];
            if (offers.length === 0 || renderedBreaks[manufacturerPartId]) return;
            const tbody = $('#vendor-rows-' + manufacturerPartId);
            if (tbody.length === 0) return;
            renderedBreaks[manufacturerPartId] = true;

            const boltMarker = liveBoltHtml(apiInfo['provider_label']);
            let rows = $();
            offers.forEach(function (offer) {
                const breaks = offer['price_breaks'] || [];
                if (breaks.length === 0) return;  // skip vendors with no purchasable price
                const name = offer['seller'] || '';
                const url = offer['product_detail_url'];
                const sellerName = (url ? '<a href="' + url + '" target="_blank">' + name + '</a>' : name) + boltMarker;
                const sku = offer['seller_part_number'] || '';
                const leadTime = (offer['lead_time_days'] === null || offer['lead_time_days'] === undefined) ? '' : offer['lead_time_days'];
                breaks.forEach(function (pb) {
                    const price = currencyUnit + parseFloat(pb['unit_cost']).toFixed(4);
                    rows = rows.add($(
                        '<tr>'
                        + '<td class="text-normal">' + sellerName + '</td>'
                        + '<td class="text-normal">' + sku + '</td>'
                        + '<td class="text-normal">' + pb['moq'] + '</td>'
                        + '<td class="text-normal"></td>'
                        + '<td class="text-normal">' + price + '</td>'
                        + '<td class="text-normal">' + leadTime + '</td>'
                        + '<td class="text-normal"></td><td class="text-normal"></td><td class="text-normal"></td>'
                        + '</tr>'
                    ));
                });
            });
            if (rows.length) {
                tbody.find('.no-vendors-row').remove();  // live offers replace the empty state
                tbody.append(rows);
            }
        }

        $(document).ready(function () {
            $('#sourcing-fetch-button').on('click', function () {
                fetchSourcing(currentQuantity());
            });
        });
        {% endif %}
    </script>
{% endblock bom-script %}