{% extends "stock/stock_app_base.html" %}
{% load static %}
{% load inventree_extras %}
{% load i18n %}

{% block sidebar %}
{% include "stock/location_sidebar.html" %}
{% endblock %}

{% block breadcrumb_tree %}
<div id="breadcrumb-tree"></div>
{% endblock breadcrumb_tree %}

{% block heading %}
{% if location %}
{% trans "Stock Location" %}: {{ location.name }}
{% else %}
{% trans "Stock" %}
{% endif %}
{% endblock %}

{% block actions %}

<!-- Admin view -->
{% if location and user.is_staff and roles.stock_location.change %}
{% url 'admin:stock_stocklocation_change' location.pk as url %}
{% include "admin_button.html" with url=url %}
{% endif %}

{% if barcodes %}
<!-- Barcode actions menu -->
{% if location %}
<div class='btn-group' role='group'>
    <button id='barcode-options' title='{% trans "Barcode actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'><span class='fas fa-qrcode'></span> <span class='caret'></span></button>
    <ul class='dropdown-menu'>
        <li><a class='dropdown-item' href='#' id='show-qr-code'><span class='fas fa-qrcode'></span> {% trans "Show QR Code" %}</a></li>
        {% if labels_enabled %}
        <li><a class='dropdown-item' href='#' id='print-label'><span class='fas fa-tag'></span> {% trans "Print Label" %}</a></li>
        {% endif %}
        <li><a class='dropdown-item' href='#' id='barcode-check-in'><span class='fas fa-arrow-right'></span> {% trans "Check-in Items" %}</a></li>
    </ul>
</div>
<!-- Check permissions and owner -->
{% if user_owns_location %}
{% if roles.stock.change %}
<div class='btn-group' role='group'>
    <button id='stock-actions' title='{% trans "Stock actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
        <span class='fas fa-boxes'></span> <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' role='menu'>
        <li>
            <a class='dropdown-item' href='#' id='location-count'>
                <span class='fas fa-clipboard-list'></span>
                {% trans "Count stock" %}
            </a>
        </li>
        <li>
            <a class='dropdown-item' href='#' id='location-move'>
                <span class='fas fa-exchange-alt'></span>
                {% trans "Transfer stock" %}
            </a>
        </li>
    </ul>
</div>
{% endif %}
{% if roles.stock_location.change %}
<div class='btn-group' role='group'>
    <button id='location-actions' title='{% trans "Location actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle="dropdown"><span class='fas fa-sitemap'></span> <span class='caret'></span></button>
    <ul class='dropdown-menu' role='menu'>
        <li><a class='dropdown-item' href='#' id='location-edit'><span class='fas fa-edit icon-green'></span> {% trans "Edit location" %}</a></li>
        {% if roles.stock.delete %}
        <li><a class='dropdown-item' href='#' id='location-delete'><span class='fas fa-trash-alt icon-red'></span> {% trans "Delete location" %}</a></li>
        {% endif %}
    </ul>
</div>
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if user_owns_location and roles.stock_location.add %}
<button class='btn btn-success' id='location-create' type='button' title='{% trans "Create new stock location" %}'>
    <span class='fas fa-plus-circle'></span> {% trans "New Location" %}
</button>
{% endif %}
{% endblock %}

{% block details_left %}
<table class='table table-striped table-condensed'>
    <col width='25'>
    {% if location %}
    {% if location.description %}
    <tr>
        <td><span class='fas fa-info-circle'></span></td>
        <td>{% trans "Description" %}</td>
        <td>{{ location.description }}</td>
    </tr>
    {% endif %}
    <tr>
        <td><span class='fas fa-sitemap'></span></td>
        <td>{% trans "Location Path" %}</td>
        <td>{{ location.pathstring }}</td>
    </tr>
    {% else %}
    <tr>
        <td><span class='fas fa-sitemap'></span></td>
        <td>{% trans "Location Path" %}</td>
        <td><em>{% trans "Top level stock location" %}</em></td>
    </tr>
    {% endif %}
    {% if ownership_enabled and location_owner %}
    <tr>
        <td><span class='fas fa-users'></span></td>
        <td>{% trans "Location Owner" %}</td>
        <td>
            {{ location_owner }}
            {% if not user_owns_location %}
            <span class='badge rounded-pill bg-warning badge-right' title='{% trans "You are not in the list of owners of this location. This stock location cannot be edited." %}'>
                {% trans "Read only" %}
            </span>
            {% endif %}
        </td>
    </tr>
    {% endif %}
</table>
{% endblock details_left %}

{% block details_right %}
{% if location %}
<table class='table table-striped table-condensed'>
    <col width='25'>
    <tr>
        <td><span class='fas fa-map-marker-alt'></span></td>
        <td>{% trans "Sublocations" %}</td>
        <td>{{ location.children.count }}</td>
    </tr>
    <tr>
        <td><span class='fas fa-boxes'></span></td>
        <td>{% trans "Stock Items" %}</td>
        <td>{{ location.item_count }}</td>
    </tr>
</table>
{% else %}
<table class='table table-striped table-condensed'>
    <col width='25'>
    <tr>
        <td><span class='fas fa-map-marker-alt'></span></td>
        <td>{% trans "Stock Locations" %}</td>
        <td>{{ loc_count }}</td>
    </tr>
    <tr>
        <td><span class='fas fa-boxes'></span></td>
        <td>{% trans "Stock Items" %}</td>
        <td>{{ stock_count }}</td>
    </tr>
</table>
{% endif %}
{% endblock details_right %}

{% block page_content %}

<div class='panel panel-hidden' id='panel-stock'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Stock Items" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button type='button' class='btn btn-success' id='item-create' title='{% trans "Create new stock item" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Stock Item" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "stock_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-sublocations'>
    <div class='panel-heading'>
        <h4>{% trans "Sublocations" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='sublocation-button-toolbar'>
            <div class='btn-group' role='group'>
                <!-- Printing actions menu -->
                {% if labels_enabled %}
                <div class='btn-group' role='group'>
                    <button id='location-print-options' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle="dropdown" title='{% trans "Printing Actions" %}'>
                        <span class='fas fa-print'></span> <span class='caret'></span>
                    </button>
                    <ul class='dropdown-menu'>
                        <li><a class='dropdown-item' href='#' id='multi-location-print-label' title='{% trans "Print labels" %}'><span class='fas fa-tags'></span> {% trans "Print labels" %}</a></li>
                    </ul>
                </div>
                {% endif %}
                {% include "filter_list.html" with id="location" %}
            </div>
        </div>
    
        <table class='table table-striped table-condensed' data-toolbar='#sublocation-button-toolbar' id='sublocation-table'></table>
    </div>
</div>

{% endblock %}

{% block js_ready %}
{{ block.super }}

    onPanelLoad('sublocations', function() {
        loadStockLocationTable($('#sublocation-table'), {
            params: {
                {% if location %}
                parent: {{ location.pk }},
                {% else %}
                parent: 'null',
                {% endif %}
            },
            allowTreeView: true,
        });
    });
    
    linkButtonsToSelection(
        $('#sublocation-table'),
        [
            '#location-print-options',
        ]
    );
    
    {% if labels_enabled %}
    $('#print-label').click(function() {

        var locs = [{{ location.pk }}];

        printStockLocationLabels(locs);        

    });
    
    $('#multi-location-print-label').click(function() {
    
        var selections = $('#sublocation-table').bootstrapTable('getSelections');
    
        var locations = [];
    
        selections.forEach(function(loc) {
            locations.push(loc.pk);
        });
    
        printStockLocationLabels(locations);
    });
    {% endif %}

    {% if location %}
    $("#barcode-check-in").click(function() {
        barcodeCheckIn({{ location.id }});
    });
    {% endif %}

    $('#location-create').click(function () {

        createStockLocation({
            {% if location %}
            parent: {{ location.pk }},
            {% endif %}
            follow: true,
        });
    });

    {% if location %}

    $('#location-edit').click(function() {
        editStockLocation({{ location.id }}, {
            reload: true,
        });
    });

    $('#location-delete').click(function() {
        launchModalForm("{% url 'stock-location-delete' location.id %}",
                         {
                             redirect: "{% url 'stock-index' %}"
                         });
        return false;
    });

    {% if location %}

    function adjustLocationStock(action) {
        inventreeGet(
            '{% url "api-stock-list" %}',
            {
                location: {{ location.id }},
                in_stock: true,
                part_detail: true,
                location_detail: true,
            },
            {
                success: function(items) {
                    adjustStock(action, items, {
                        success: function() {
                            location.reload();
                        }
                    });
                }
            }
        );
    }

    $("#location-count").click(function() {
        adjustLocationStock('count');
    });

    $("#location-move").click(function() {
        adjustLocationStock('move');
    });

    {% endif %}

    $('#show-qr-code').click(function() {
        launchModalForm("{% url 'stock-location-qr' location.id %}",
        {
            no_post: true,
        });
    });

    {% endif %}

    $('#item-create').click(function () {
        createNewStockItem({
            data: {
                {% if location %}
                location: {{ location.id }}
                {% endif %}
            },
        });
    });

    onPanelLoad('stock', function() {
        loadStockTable($("#stock-table"), {
            buttons: [
                '#stock-options',
            ],
            params: {
                {% if location %}
                location: {{ location.pk }},
                {% endif %}
                part_detail: true,
                location_detail: true,
                supplier_part_detail: true,
            },
            url: "{% url 'api-stock-list' %}",
        });
    });

    enableSidebar('stocklocation');

    // Enable breadcrumb tree view
    enableBreadcrumbTree({
        label: 'location',
        url: '{% url "api-location-tree" %}',
        {% if location %}
        selected: {{ location.pk }},
        {% endif %}
        processNode: function(node) {
            node.text = node.name;
            node.href = `/stock/location/${node.pk}/`;

            return node;
        }
    });

{% endblock %}
