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

{% load static %}
{% load materializecss %}

{% block head-title %}{{ title }}{% endblock %}

{% block main %}
    {{ add_subpart_form.media }}
{% endblock %}

{% block bom-menu %}
{% endblock %}

{% block content %}
    <div class="part-info container-app edit-page">
        <p><a href="{% url 'bom:part-info-history' part_id=part.id part_revision_id=part_revision.id %}"><i class="material-icons tiny">arrow_back</i> Back to {{ part.full_part_number }}</a></p>
        {% if immutable %}
            <div class="card-panel">
                <p>Rev {{ part_revision.revision }} is {{ part_revision.get_configuration_display }}. Revise it to make
                    changes in a new Draft revision.</p>
                {% if perms.bom.edit_part %}
                    <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>
                {% endif %}
            </div>
        {% else %}
        <div class="card-panel">
            <h5>Details</h5>
            <form id="part-revision-form" action="{% url 'bom:part-edit-revision' part_id=part.id part_revision_id=part_revision.id %}" method="post">
                {% csrf_token %}
                {{ part_revision_form.non_field_errors }}
                {% include 'bom/part-revision-display.html' with part_revision_form=part_revision_form %}
                <div class="right-align">
                    <button class="waves-effect waves-light btn btn-primary" type="submit">Save</button>
                </div>
            </form>
        </div>

        <div id="bom" class="card-panel">
            <h5>Bill of materials</h5>
            {% include 'bom/components/bom-indented.html' with order_by='indented' manage=1 bom_items=indented_bom.parts part=part part_revision=part_revision profile=profile %}

            <h6>Add subpart</h6>
            <form action="{% url 'bom:part-add-subpart' part_id=part.id part_revision_id=part_revision.id %}" method="post">
                {% csrf_token %}
                <div class="row">
                    {{ add_subpart_form.subpart_part_number|materializecss:'m4 s12' }}
                    {{ add_subpart_form.count|materializecss:'m2 s12' }}
                    {{ add_subpart_form.reference|materializecss:'m3 s12' }}
                    {{ add_subpart_form.do_not_load|materializecss:'m2 s12 input-field materialize-checkbox-padding' }}
                    <div class="col m1 s12 input-field">
                        <button class="waves-effect waves-light btn btn-primary" type="submit" name="action">Add</button>
                    </div>
                </div>
            </form>

            <h6>Import from CSV</h6>
            <p class="grey-text text-darken-1">Columns: <b>part_number</b> or <b>manufacturer_part_number</b>, and
                <b>quantity</b>. Optional: <b>reference</b> (or designator), <b>do_not_load</b>, <b>dnp</b>. Parts must
                already exist. You'll see a preview before anything is saved.</p>
            <form action="{% url 'bom:part-upload-bom' part_id=part.id %}" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="row">
                    <div class="col m6 s12 file-field input-field">
                        <div class="btn green lighten-1">
                            <span>File</span>
                            {{ upload_subparts_csv_form.file }}
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text" placeholder="No file chosen">
                            {{ upload_subparts_csv_form.file.errors }}
                        </div>
                    </div>
                    <div class="col m4 s12 edit-page-radios">
                        <label class="edit-page-radio"><input name="mode" type="radio" value="add" checked/><span>Add to BOM</span></label>
                        <label class="edit-page-radio"><input name="mode" type="radio" value="replace"/><span>Replace BOM</span></label>
                    </div>
                    <div class="col m2 s12 input-field right-align">
                        <input class="waves-effect waves-light btn btn-primary" type="submit" value="Upload"/>
                    </div>
                </div>
            </form>
        </div>

        <div id="manufacturer-parts" class="card-panel">
            <h5>Manufacturer parts</h5>
            {% if manufacturer_parts %}
                <table class="highlight">
                    <thead>
                    <tr>
                        <th>Manufacturer</th>
                        <th>Part number</th>
                        <th></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for manufacturer_part in manufacturer_parts %}
                        <tr>
                            <td>{{ manufacturer_part.manufacturer.name }}</td>
                            <td>{{ manufacturer_part.manufacturer_part_number }}</td>
                            <td>
                                {% if manufacturer_part.id == part.primary_manufacturer_part_id %}
                                    <span class="chip">Primary</span>
                                {% elif perms.bom.manage_sourcing %}
                                    <form method="post" action="{% url 'bom:manufacturer-part-make-primary' manufacturer_part_id=manufacturer_part.id %}">
                                        {% csrf_token %}
                                        <input type="hidden" name="next" value="{{ request.path }}">
                                        <button type="submit" class="btn-flat btn-small green-text text-lighten-1">Make primary</button>
                                    </form>
                                {% endif %}
                            </td>
                            <td class="right-align">
                                {% if perms.bom.manage_sourcing %}
                                    <a class="btn-flat btn-small green-text text-lighten-1" href="{% url 'bom:manufacturer-part-edit' manufacturer_part_id=manufacturer_part.id %}?next={{ request.path|urlencode }}">Edit</a>
                                    <a class="btn-flat btn-small red-text text-lighten-1"
                                       href="{% url 'bom:manufacturer-part-delete' manufacturer_part_id=manufacturer_part.id %}?next={{ request.path|urlencode }}"
                                       onclick="return confirm('Are you sure you want to delete {{ manufacturer_part.manufacturer_part_number|escapejs }}?\n\nIts vendor parts will also be permanently deleted.')">Delete</a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="grey-text text-darken-1">This part has no manufacturer parts yet.</p>
            {% endif %}
            {% if perms.bom.manage_sourcing %}
                <a class="waves-effect waves-light btn btn-primary edit-page-add"
                   href="{% url 'bom:part-add-manufacturer-part' part_id=part.id %}?next={{ request.path|urlencode }}"><i class="material-icons left">add</i>Add manufacturer part</a>
            {% endif %}
        </div>
        {% endif %}
    </div>
{% endblock %}

{% block bom-script %}
    <!-- Tree Table -->
    <script src="{% static 'bom/js/jquery.treetable.js' %}"></script>
    <script>
        $("#indented-bom").treetable({
            expandable: true,
            indent: 2,
            initialState: 'collapsed',
            onInitialized: function () {
                $("#indented-bom").treetable("reveal", {{ part_revision.id }});
            }
        });
    </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>

    <!-- Handle if there's an anchor, select tab -->
    <script type='text/javascript'>
        // 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
                }
            );

        });
    </script>
{% endblock bom-script %}