{% 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>
                        {% if part_revision %}<div class="part-identity-synopsis">{{ part_revision.synopsis }}</div>{% endif %}
                        <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' %}revision-chip-draft
                                {% elif part_revision.configuration == 'I' %}revision-chip-review
                                {% elif part_revision.configuration == 'R' %}revision-chip-released
                                {% elif part_revision.configuration == 'O' %}revision-chip-obsolete
                                {% else %}grey lighten-4
                                {% endif %}">
                                {{ part_revision.get_configuration_display }}
                            </span>
                            {% if perms.bom.edit_part %}
                                {% if part_revision.is_immutable and latest_revision.id != part_revision.id and latest_revision.configuration == 'D' %}
                                    <a class="waves-effect waves-light btn green lighten-1" href="{% url 'bom:part-info' part_id=part.id %}">Open rev {{ latest_revision.revision }}</a>
                                {% elif 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 part-actions-menu'>
                            <li class="part-actions-heading" tabindex="-1">Rev {{ part_revision.revision }}</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 not in allowed %}grey-text{% endif %}"
                                           onclick="changePartRevision('{{ config }}', {% if config in allowed %}true{% else %}false{% endif %})">
                                            <i class="material-icons">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 not in allowed %}grey-text{% endif %}"
                                           onclick="changePartRevision('{{ config }}', {% if config in allowed %}true{% else %}false{% endif %})">
                                            <i class="material-icons">group</i>Send to review</a>
                                    </li>
                                {% endif %}
                            {% endwith %}
                            {% 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 text-darken-3{% else %}grey-text{% endif %}"
                                           onclick="changePartRevision('{{ config }}', {% if config in allowed %}true{% else %}false{% endif %})">
                                            <i class="material-icons">block</i>Mark obsolete</a>
                                    </li>
                                {% endif %}
                            {% endwith %}
                            {% if perms.bom.delete_revision %}
                                <li>
                                    <a class="red-text text-darken-1" onclick="deletePartRevision()">
                                        <i class="material-icons">delete</i>Delete rev {{ part_revision.revision }}</a>
                                </li>
                            {% endif %}
                            <li class="divider" tabindex="-1"></li>
                            <li class="part-actions-heading" tabindex="-1">Part</li>
                            <li>
                                <a href="{% url 'bom:part-edit' part_id=part.id %}">
                                    <i class="material-icons">edit</i>Change number or class</a>
                            </li>
                            <li>
                                <a class="modal-trigger" data-target="part-image-modal">
                                    <i class="material-icons">photo_camera</i>Change photo</a>
                            </li>
                            <li class="divider" tabindex="-1"></li>
                            <li>
                                <a href="{% url 'bom:part-revision-export-bom' part_revision_id=part_revision.id %}">
                                    <i class="material-icons">download</i>Export BOM CSV</a>
                            </li>
                        </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 part_revision %}
                {% include 'bom/components/revision-status.html' %}
            {% endif %}

            {% if proposals.changes %}
                <div class="part-status-strip part-proposals-strip printer-hide">
                    <i class="material-icons">chat_bubble_outline</i>
                    {{ proposals.changes|length }} open change request{{ 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">Overview</a></li>
                        <li class="tab"><a id="bom-tab" href="#bom">Bill of materials{% if part_revision.assembly %}{% with count=part_revision.assembly.subparts.count %}{% if count %} · {{ count }}{% endif %}{% endwith %}{% endif %}</a></li>
                        <li class="tab"><a id="used-tab" href="#used">Where used{% if part_revision %}{% with count=part_revision.where_used.count %}{% if count %} · {{ count }}{% endif %}{% endwith %}{% endif %}</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">Overview</h4>
                    {% if part_revision %}
                        <div class="overview-cards">
                            <div class="card-panel overview-card">
                                <span class="eyebrow">Unit cost at {{ qty }}</span>
                                <div id="specs-unit-cost" class="overview-figure"><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: 16px; vertical-align: middle; cursor: help;"
                                        data-position="right" data-tooltip="">bolt</i></div>
                                <div class="overview-note"><span id="sourcing-quote-vendor"></span></div>
                                <div class="overview-note">Subparts without a cost: <span id="sourcing-missing-item-costs">{{ indented_bom.missing_item_costs }}</span></div>
                                <form action="{% url 'bom:part-info' part_id=part.id %}" method="post" class="quote-qty-form printer-hide">
                                    {% csrf_token %}
                                    <label for="{{ part_info_form.quantity.id_for_label }}">Quantity</label>
                                    {{ 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 class="card-panel overview-card">
                                <span class="eyebrow">Order total with MOQs</span>
                                <div class="overview-figure"><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: 16px; vertical-align: middle; cursor: help;"
                                        data-position="right" data-tooltip="">bolt</i></div>
                                <div class="overview-note">NRE: <span id="sourcing-est-nre">{{ indented_bom.nre|default_if_none:'-' }}</span></div>
                            </div>
                            <div class="card-panel overview-card">
                                <span class="eyebrow">Primary manufacturer part</span>
                                {% if part.primary_manufacturer_part %}
                                    <div class="overview-value">{% if part.primary_manufacturer_part.link %}<a href="{{ part.primary_manufacturer_part.link }}" target="_blank" rel="noopener">{% endif %}{{ part.primary_manufacturer_part.manufacturer.name }} {{ part.primary_manufacturer_part.manufacturer_part_number }}{% if part.primary_manufacturer_part.link %}</a>{% endif %}</div>
                                {% else %}
                                    <div class="overview-value grey-text text-darken-1">None yet</div>
                                {% endif %}
                                <div id="sourcing-data-sheet-wrapper" class="overview-note" style="{% if not part.primary_manufacturer_part.datasheet_url %}display: none;{% endif %}">
                                    <a id="sourcing-data-sheet" target="_blank" rel="noopener"
                                       {% if part.primary_manufacturer_part.datasheet_url %}href="{{ part.primary_manufacturer_part.datasheet_url }}"{% endif %}>View datasheet</a>
                                </div>
                                {% if part.primary_manufacturer_part.manufacturer_part_number %}
                                    <div class="overview-note"><a href="https://octopart.com/search?q={{ part.primary_manufacturer_part.manufacturer_part_number|urlencode }}"
                                                                  target="_blank" rel="noopener">Search Octopart</a></div>
                                {% endif %}
                                {% if perms.bom.edit_part and not part_revision.is_immutable %}
                                    <div class="overview-note printer-hide"><a href="{% url 'bom:part-edit-revision' part_id=part.id part_revision_id=part_revision.id %}#manufacturer-parts">{% if part.primary_manufacturer_part %}Change{% else %}Add one{% endif %} on the Edit page</a></div>
                                {% endif %}
                            </div>
                            <div class="card-panel overview-card">
                                <span class="eyebrow">Files</span>
                                <div class="overview-value">
                                    <img alt="" style="width: 16px; vertical-align: middle;" src="{% static 'bom/img/google_drive_logo.png' %}">
                                    <a href="{% url 'google-drive:add-folder' part_id=part.id %}" target="_blank">Open Drive folder</a>
                                </div>
                            </div>
                        </div>

                        <div class="card-panel overview-live printer-hide">
                            {% if sourcing_parts %}
                                <div id="sourcing-fetch-row">
                                    <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>
                            {% endif %}
                            <div id="sourcing-lead-time-wrapper" style="display: none;">Lead time (days): <span id="sourcing-lead-time"></span></div>
                            <div id="sourcing-stock-wrapper" style="display: none;">In stock: <span id="sourcing-stock"></span></div>
                            <div id="sourcing-near-match-wrapper" class="amber-text text-darken-3" style="display: none;">Near match: pricing is for
                                <span id="sourcing-near-match"></span>, not the exact part number.</div>
                            <div id="sourcing-unavailable-wrapper" class="amber-text text-darken-3" style="display: none;"><span id="sourcing-unavailable"></span></div>
                            <div id="sourcing-similar-wrapper" class="grey-text text-darken-1" style="display: none;"><span id="sourcing-similar"></span></div>
                            <div id="sourcing-vendors-wrapper" class="grey-text text-darken-1" style="display: none;"><span id="sourcing-vendors"></span></div>
                        </div>

                        <div class="card-panel overview-details">
                            <h5>Details</h5>
                            <dl>
                                {% if organization.number_scheme == 'S' %}
                                    <dt>Class</dt><dd>{{ part.number_class }}</dd>
                                {% endif %}
                                <dt>Description</dt><dd>{{ part_revision.description|default:'-' }}</dd>
                                {% for property in part_revision.properties.all %}
                                    <dt>{{ property.property_definition.name }}</dt>
                                    <dd>{{ property.value_raw }}{% if property.unit_definition %} {{ property.unit_definition.symbol }}{% endif %}</dd>
                                {% endfor %}
                                <dt>State</dt><dd>{{ part_revision.get_configuration_display }} as of <span id="specs-revision-timestamp"></span></dd>
                            </dl>
                        </div>
                    {% endif %}
                </div>

                <div id="bom" class="col s12">
                    <h4 class="printer-show">Bill of Materials</h4>
                    <div id="bom-indented" class="card-panel tab-card">
                        <div class="view-toggle printer-hide" role="group" aria-label="BOM layout">
                            <span class="active">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" class="card-panel tab-card" style="display: none;">
                        <div class="view-toggle printer-hide" role="group" aria-label="BOM layout">
                            <a onclick="showIndentedBOM()" href="#">Indented</a><span class="active">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" class="card-panel tab-card">
                        <div class="view-toggle printer-hide" role="group" aria-label="Where used scope">
                            <span class="active">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" class="card-panel tab-card" style="display: none;">
                        <div class="view-toggle printer-hide" role="group" aria-label="Where used scope">
                            <a onclick="showRevisionWhereUsed()" href="#">This revision</a><span class="active">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="card-panel tab-card">
                    {% if history_entries %}
                    <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 class="text-nowrap">{{ change.resolved_at|date:"M j, Y 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 %}
                                                &middot; <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 %}
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                        <p class="empty-state">No history yet. Edits, new revisions and releases will appear here.</p>
                    {% endif %}
                    </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 %}
                        <a class="waves-effect waves-green btn-flat green-text text-darken-2 tab-add-action"
                           href="{% url 'bom:part-add-manufacturer-part' part_id=part.id %}"><i class="material-icons left">add</i>Add manufacturer part</a>
                    {% 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;
        });

        $("#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 %}