{% 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' %}"/>
{% endblock %}

{% block content %}
    {% include 'bom/bom-action-btn.html' with profile=profile %}
    <div class="container-app">
        <div class="part-info">
            <div class="part-header-title-row">
                <h1 style="margin: 0;">{{ part.full_part_number }}</h1>

                {% if part_revision %}
                    <div class="input-field">
                        <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>
                {% endif %}
            </div>

            <div class="row printer-hide valign-wrapper-row">
                {% if part_revision %}
                    <div class="col s6 left-align part-info-form">
                        <form action="{% url 'bom:part-info' part_id=part.id %}" method="post">
                            {% csrf_token %}
                            <div class="row" style="margin-bottom: 0; display: flex; align-items: center;">
                                <div class="part-info-form-wrapper">
                                    {{ part_info_form }}
                                </div>
                                <button type="submit"
                                        class="waves-effect waves-green btn-flat input-field btn-icon-round"
                                        style="margin-left: 8px; margin-top: 15px; min-width: 36px;"><i
                                        class="material-icons green-text">refresh</i></button>
                            </div>
                        </form>
                    </div>
                {% endif %}
                <div class="col s6 right-align manage-btn-col">
                    {% if perms.bom.edit_part and part_revision %}
                        <button class='dropdown-trigger hide-on-small-and-down waves-effect waves-light btn-flat'
                                href='#' data-target='dropdown-revision'><i
                                class="material-icons right">arrow_drop_down</i>Manage
                        </button>
                        <a class='dropdown-trigger hide-on-med-and-up' href='#' data-target='dropdown-revision'><i
                                class="material-icons green-text text-lighten-1">more_vert</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</a>
                            </li>
                            {% if not part_revision.is_immutable %}
                                <li>
                                    <a class="green-text text-lighten-1"
                                       href="{% url 'bom:part-revision-edit' part_id=part.id part_revision_id=part_revision.id %}">
                                        <i class="material-icons green-text text-lighten-1">edit</i>Edit</a>
                                </li>
                            {% endif %}
                            {% 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 %}
                            {% with allowed=part_revision.get_allowed_transitions config='R' %}
                                {% 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 %}">check</i>Release</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 %}
                            {% 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>
                    {% elif perms.bom.create_part and not part_revision %}
                        <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>

            <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>
                    </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 }}
                                    {% if perms.bom.edit_part %}
                                        <a href="{% url 'bom:part-edit' part_id=part.id %}">&nbsp;[edit]</a>
                                    {% endif %}
                                </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.svg' %}">&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="mouser-data-sheet-wrapper" style="display: none; min-height: 22px;">
                                    <div class="col s4 l2 text-right" style="padding-left: 0;">
                                        <img title="Via Mouser.com" style="width: 16px;" src="{% static 'bom/img/mouser.png' %}">&nbsp;Datasheets
                                    </div>
                                    <div class="col s8 l10"><a id="mouser-data-sheet" target="_blank">View datasheet</a></div>
                                </div>
                            </div>
                        </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 %}
                                        <a href="{% url 'bom:part-edit' part_id=part.id %}">&nbsp;[change]</a>
                                    {% endif %}
                                </div>
                            </div>
                            <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="mouser-est-cost"></span><span>{{ indented_bom.unit_cost|default_if_none:'-' }}</span></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="mouser-missing-item-costs"></span><span>{{ indented_bom.missing_item_costs }}</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="mouser-est-nre"></span><span>{{ 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="mouser-est-cost-per-order"></span><span>{{ indented_bom.out_of_pocket_cost|default_if_none:'-' }}</span></div>
                            </div>
                            <div class="row" id="mouser-stock-wrapper" style="display: none;">
                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Mouser stock:</div>
                                <div class="col s8 l10"><span id="mouser-stock"></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>
                    <br>
                    <div class="responsive-table-wrapper">
                        <ul class="collapsible" data-collapsible="expandable" style="overflow: scroll;">
                            <li class="active">
                                <div class="collapsible-header"><i class="material-icons">my_location</i>Where this revision is used</div>
                                <div class="collapsible-body">
                                    <table class="highlight tight">
                                        <thead>
                                        <tr>
                                            <th>Part Number</th>
                                            <th>Synopsis</th>
                                            <th>Rev</th>
                                            <th>Manufacturer</th>
                                            <th>MPN</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        {% for used_part in where_used %}
                                            <tr>
                                                <td>
                                                    <a href="{% url 'bom:part-info-history' part_id=used_part.part.id part_revision_id=used_part.id %}">{{ used_part.part.full_part_number }}</a>
                                                </td>
                                                <td>{{ used_part.synopsis }}</td>
                                                <td>{{ used_part.revision }}</td>
                                                <td>{{ used_part.part.primary_manufacturer_part.manufacturer.name }}</td>
                                                <td>{{ used_part.part.primary_manufacturer_part.manufacturer_part_number }}</td>
                                            </tr>
                                        {% empty %}
                                            <tr>
                                                <td colspan="99"
                                                    style="padding: 40px; text-align: center; color: #757575;"><i>This
                                                    part is not currently
                                                    used in any of your other parts. To add a part to a subassembly or assembly, go to the
                                                    parent part's Bill of Materials, and click "Manage", then "Edit".</i></td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header"><i class="material-icons">location_searching</i>All part usages</div>
                                <div class="collapsible-body">
                                    <table class="highlight tight">
                                        <thead>
                                        <tr>
                                            <th>Part Number</th>
                                            <th>Synopsis</th>
                                            <th>Rev</th>
                                            <th>Manufacturer</th>
                                            <th>MPN</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        {% for used_part in where_used_part %}
                                            <tr>
                                                <td>
                                                    <a href="{% url 'bom:part-info-history' part_id=used_part.part.id part_revision_id=used_part.id %}">{{ used_part.part.full_part_number }}</a>
                                                </td>
                                                <td>{{ used_part.synopsis }}</td>
                                                <td>{{ used_part.revision }}</td>
                                                <td>{{ used_part.part.primary_manufacturer_part.manufacturer.name }}</td>
                                                <td>{{ used_part.part.primary_manufacturer_part.manufacturer_part_number }}</td>
                                            </tr>
                                        {% empty %}
                                            <tr>
                                                <td colspan="99" style="text-align: center; height: 20vh;"><i>This part is not currently
                                                    used in any of your other parts.
                                                    {% if perms.bom.part_edit %}
                                                        To add a part to a subassembly or assembly, go to the
                                                        parent part's Bill of Materials, and click "Manage", then "Edit".
                                                    {% endif %}
                                                </i></td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </li>
                        </ul>
                    </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 %}
                    {% 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>
{% 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);

        // 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>
    <script>
        $("#manufacturer-parts").treetable({
            expandable: true,
            indent: 2,
            initialState: 'collapsed',
        });
    </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\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();
        }
    </script>
{% endblock bom-script %}