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

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

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

{% block main %}
    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/dashboard.css' %}"/>
{% endblock %}

{% block content %}
    <div class="container-app part-list-page">
        <div class="part-list-header">
            <div>
                <span class="eyebrow">{{ organization.name }}</span>
                <div class="part-list-title-row">
                    <h1 class="part-list-title">Parts</h1>
                    <a class="icon-button dropdown-trigger-list" href="#" data-target="list-menu" aria-label="More actions"><i class="material-icons">more_vert</i></a>
                    <ul id="list-menu" class="dropdown-content list-menu">
                        {% if profile.role == 'A' %}
                            <li><a href="#" onclick="startPartSelection(); return false;">
                                <i class="material-icons">checklist</i>Select parts
                                <small class="grey-text">Delete several parts at once</small></a>
                            </li>
                            <li class="divider" tabindex="-1"></li>
                        {% endif %}
                        {% if perms.bom.create_part %}
                            <li><a href="{% url 'bom:import' %}">
                                <i class="material-icons">upload_file</i>Import CSV&hellip;
                                <small class="grey-text">Add or update parts, vendor prices or a BOM</small></a>
                            </li>
                        {% endif %}
                        <li><a href="{% url 'bom:home' %}?download=1{% if part_class %}&part_class={{ part_class }}{% endif %}{% if query %}&q={{ query|urlencode }}{% endif %}">
                            <i class="material-icons">download</i>{% if part_class or query %}Export parts shown{% else %}Export all parts{% endif %} ({{ part_revs.paginator.count }})
                            <small class="grey-text">{% if part_class or query %}Matches the current search and part class{% else %}Every part in your organization{% endif %}</small></a>
                        </li>
                        <li><a href="{% url 'bom:export-vendor-prices' %}">
                            <i class="material-icons">download</i>Export all vendor prices
                            <small class="grey-text">Every price break for every part</small></a>
                        </li>
                    </ul>
                </div>
            </div>
            {% if profile.role == 'A' %}
                <div class="part-list-actions" id="selection-actions" hidden>
                    <span id="selected-count"></span>
                    <button form="actionForm" class="waves-effect waves-light btn red lighten-1" type="submit" name="part-action" value="Delete"
                            onclick="return confirmDeleteSelectedParts()"><i class="material-icons left">delete</i>Delete</button>
                    <a class="btn-outline waves-effect" href="#" onclick="stopPartSelection(); return false;">Done</a>
                </div>
            {% endif %}
        </div>

        <form id="searchForm" class="part-list-filters" name="search-form" action="{% url 'bom:home' %}" method="get">
            {% if organization.number_scheme == 'S' %}
                <div class="input-field part-class-filter">
                    {{ part_class_selection_form.part_class }}
                    <label for="{{ part_class_selection_form.part_class.id_for_label }}" class="active">Part class</label>
                </div>
            {% endif %}
            <div class="input-field part-search-filter">
                <button type="submit" class="prefix part-search-submit" aria-label="Search"><i class="material-icons">search</i></button>
                <input type="search" id="autocomplete-input" autocomplete="off" class="text autocomplete" name="q" value="{% if query %}{{ query }}{% endif %}"
                       placeholder="Part number, synopsis, MPN or manufacturer">
                <label for="autocomplete-input" class="active">Search</label>
                <div class="part-search-suffix">
                    {% if part_class or query %}
                        <a href="#" onclick="clearSearchExpression(); return false;" class="tooltipped" data-position="bottom" data-tooltip="Clear search" aria-label="Clear search"><i class="material-icons">clear</i></a>
                    {% endif %}
                    <a href="{% url 'bom:search-help' %}" class="tooltipped" data-position="bottom" data-tooltip="Search tips" aria-label="Search tips"><i class="material-icons">help_outline</i></a>
                </div>
            </div>
        </form>

        <form id="actionForm" name="action-form" action="{% url 'bom:home' %}" method="post">
            {% csrf_token %}
            <div class="part-list push-footer">
                <div class="responsive-table-wrapper">
                    <table class="highlight part-list tight single-line" style="margin-bottom: 14px;">
                        <thead>
                        <tr>
                            {% if profile.role == 'A' %}
                                <th class="text-normal checkbox-column"><label><input type="checkbox" id="action-select-all" aria-label="Select all parts"><span></span></label></th>
                            {% endif %}

                            <th class="text-normal td-med">Part Number</th>

                            {% if organization.number_scheme == 'S' %}
                                <th class="text-normal td-small">Category</th>
                            {% endif %}

                            <th class="text-normal td-large">Synopsis</th>

                            <th class="text-normal td-small">Revision</th>

                            <th class="text-normal td-med">Manufacturer</th>

                            <th class="text-normal td-med">MPN</th>

                            <th class="text-normal td-small"></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for part_rev in part_revs %}
                            <tr>
                                {% if profile.role == 'A' %}
                                    <td class="checkbox-column"><label>{% if part_rev.part.id %}
                                        <input type="checkbox" class="checkbox-array" name="actions" value="{{ part_rev.part.id }}">{% endif %}<span></span></label></td>
                                {% endif %}

                                <td class="text-normal td-med"><a href="{% url 'bom:part-info' part_id=part_rev.part.id %}">{{ part_rev.part.full_part_number }}</a></td>

                                {% if organization.number_scheme == 'S' %}
                                    <td class="text-normal td-small">{{ part_rev.part.number_class.name }}</td>
                                {% endif %}

                                <td class="text-normal td-large">{{ part_rev.synopsis }}</td>

                                <td class="text-normal td-small">{{ part_rev.revision }}</td>

                                <td class="text-normal td-med">{{ part_rev.part.primary_manufacturer_part.manufacturer.name }}</td>

                                <td class="text-normal td-med">{{ part_rev.part.primary_manufacturer_part.manufacturer_part_number }}</td>

                                <td class="text-normal td-med">
                                    <!-- Dropdown Trigger -->
                                    <a class="dropdown-trigger" href='#' data-target='part-menu-{{ part_rev.id }}'><i class="material-icons green-text">more_horiz</i></a>
                                    <!-- Dropdown Structure -->
                                    <ul id='part-menu-{{ part_rev.id }}' class='dropdown-content'>
                                        {% if not part_rev.is_immutable %}
                                            <li>
                                                <a href="{% url 'bom:part-edit-revision' part_id=part_rev.part.id part_revision_id=part_rev.id %}">
                                                    <i class="material-icons">edit</i>Edit</a>
                                            </li>
                                        {% endif %}
                                        <li>
                                            <a href="{% url 'bom:part-info' part_id=part_rev.part.id %}?tab_anchor=used">
                                                <i class="material-icons">my_location</i>Where Used</a>
                                        </li>
                                        <li>
                                            <a href="{% url 'bom:part-info' part_id=part_rev.part.id %}?tab_anchor=sourcing">
                                                <i class="material-icons">local_airport</i>Sourcing</a>
                                        </li>
                                        <li class="divider" tabindex="-1"></li>
                                        <li><a href="{% url 'bom:part-revision-export-bom' part_revision_id=part_rev.id %}"><i
                                                class="material-icons">download</i>Export BOM (indented)</a>
                                        </li>
                                        <li><a href="{% url 'bom:part-revision-export-bom' part_revision_id=part_rev.id %}?levels=1"><i
                                                class="material-icons">download</i>Export BOM (single level)</a>
                                        </li>
                                        <li><a href="{% url 'bom:part-revision-export-bom-flat' part_revision_id=part_rev.id %}"><i
                                                class="material-icons">download</i>Export BOM (flat)</a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="99" style="text-align: center; padding: 5%;"><i>No parts found. To add your first part, first create a Part Class on the <a
                                        href="{% url 'bom:settings' tab_anchor='indabom' %}">settings</a> page, then click the red + button in the bottom right of your screen.</i></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if part_revs.paginator.count %}
                    <p class="part-count grey-text">{% if part_revs.has_other_pages %}{{ part_revs.start_index }}&ndash;{{ part_revs.end_index }} of {% endif %}{{ part_revs.paginator.count }} part{{ part_revs.paginator.count|pluralize }}{% if part_class or query %} match{{ part_revs.paginator.count|pluralize:"es," }}{% endif %}</p>
                {% endif %}
                {% if part_revs.has_other_pages %}
                    <ul class="pagination center" style="padding-top: 24px;">
                        {% if part_revs.has_previous %}
                            <li><a href="?page={{ part_revs.previous_page_number }}{% if part_class %}&part_class={{ part_class }}{% endif %}{% if query %}&q={{ query }}{% endif %}"><i class="material-icons">chevron_left</i></a></li>
                        {% else %}
                            <li class="disabled"><i class="material-icons">chevron_left</i></li>
                        {% endif %}
                        {% for i in part_revs.paginator.page_range %}
                            {% if part_revs.number == i %}
                                <li class="active green lighten-2"><a>{{ i }}</a></li>
                            {% else %}
                                <li class="waves-effect waves-green"><a href="?page={{ i }}{% if part_class %}&part_class={{ part_class }}{% endif %}{% if query %}&q={{ query }}{% endif %}">{{ i }}</a></li>
                            {% endif %}
                        {% endfor %}
                        {% if part_revs.has_next %}
                            <li><a href="?page={{ part_revs.next_page_number }}{% if part_class %}&part_class={{ part_class }}{% endif %}{% if query %}&q={{ query }}{% endif %}"><i class="material-icons">chevron_right</i></a></li>
                        {% else %}
                            <li class="disabled"><i class="material-icons">chevron_right</i></li>
                        {% endif %}
                    </ul>
                {% endif %}
            </div>
        </form>
    </div>
    {% include 'bom/bom-action-btn.html' with profile=profile %}
{% endblock %}

{% block bom-script %}
    <!-- Autocomplete -->
    <script>
        var data = JSON.parse('{{ autocomplete|safe }}');
        $(document).ready(function () {
            $('input.autocomplete').autocomplete({
                data: data,
                {#limit: 10, // The max amount of results that can be shown at once. Default: Infinity.#}
                onAutocomplete: function (val) {
                    var form = document.getElementById("searchForm");
                    var input = document.getElementById("autocomplete-input");
                    input.value = `"${val}"`;
                    form.submit();
                },
                minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
            });
        });
    </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
                    alignment: 'left', // Displays dropdown with edge aligned to the left of button
                    stopPropagation: false, // Stops event propagation
                    coverTrigger: false
                }
            );
            $('.dropdown-trigger-list').dropdown({
                constrainWidth: false,
                alignment: 'left',
                coverTrigger: false
            });

            // For tooltips!
            $('.tooltipped').tooltip();
        });
    </script>

    <script type='text/javascript'>
        function updatePartSelection() {
            const count = $('.checkbox-array:checked').length;
            $('#selected-count').text(`${count} selected`);
            $('#selection-actions button').prop('disabled', count === 0);
            $('#action-select-all').prop('checked', count > 0 && count === $('.checkbox-array').length);
        }

        function startPartSelection() {
            $('.part-list-page').addClass('selecting');
            $('#selection-actions').prop('hidden', false);
            updatePartSelection();
        }

        function stopPartSelection() {
            $('.checkbox-array, #action-select-all').prop('checked', false);
            $('.part-list-page').removeClass('selecting');
            $('#selection-actions').prop('hidden', true);
        }

        function confirmDeleteSelectedParts() {
            const count = $('.checkbox-array:checked').length;
            return confirm(`Delete ${count} part${count === 1 ? '' : 's'}?\n\nAll of their revisions will also be permanently deleted. This can't be undone.`);
        }

        function clearSearchExpression() {
            $("#autocomplete-input").val("");
            $('#id_part_class').val('');
            $('#searchForm').submit();
        }

        $(document).ready(function () {
            $('#action-select-all').change(function () {
                $('.checkbox-array').prop('checked', this.checked);
                updatePartSelection();
            });
            $('.checkbox-array').change(updatePartSelection);
            if ($('.checkbox-array:checked').length) {
                startPartSelection();
            }
        });
    </script>

    <script>
        $(document).ready(function () {
            let $checkbox = $('.checkbox-array');
            let lastChecked = null;

            $checkbox.click(function (e) {
                if (!lastChecked) {
                    lastChecked = this;
                    return;
                }

                if (e.shiftKey) {
                    const start = $checkbox.index(this);
                    const end = $checkbox.index(lastChecked);
                    $checkbox.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
                }
                lastChecked = this;
            });
        });
    </script>

{% endblock bom-script %}