{% extends "part/part_base.html" %}
{% load static %}
{% block details %}

{% include 'part/tabs.html' with tab='stock' %}

<div class='row'>
    <div class='col-sm-6'>
        <h3>Part Stock</h3>
    </div>
    <div class='col-sm-6 float-right'>
        <h3>
            <div class='float-right'>
            <button class='btn btn-success' id='add-stock-item'>New Stock Item</button>
            <div id='opt-dropdown' class="dropdown" style='float: right;'>
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
                    <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href='#' id='multi-item-take' title='Take items from stock'>Take items</a></li>
                        <li><a href='#' id='multi-item-give' title='Give items to stock'>Add items</a></li>
                        <li><a href="#" id='multi-item-stocktake' title='Stocktake selected stock items'>Stocktake</a></li>
                        <li><a href='#' id='multi-item-move' title='Move selected stock items'>Move items</a></li>
                    </ul>
            </div>
            </div>
        </h3>
    </div>
</div>

<hr>

<table class='table table-striped table-condensed' id='stock-table'>
</table>


{% endblock %}

{% block js_load %}
{{ block.super }}
<script type='text/javascript' src="{% static 'script/inventree/api.js' %}"></script>
<script type='text/javascript' src="{% static 'script/inventree/stock.js' %}"></script>
{% endblock %}
{% block js_ready %}
{{ block.super }}

    $('#add-stock-item').click(function () {
        launchModalForm(
                        "{% url 'stock-item-create' %}",
                        {
                            reload: true,
                            data: {
                                part: {{ part.id }}
                            }
                        });
    });

    $("#stock-table").bootstrapTable({
        sortable: true,
        search: true,
        pagination: true,
        queryParams: function(p) {
            return {
                part: {{ part.id }},
                in_stock: true,
            }
        },
        columns: [
            {
                field: 'pk',
                title: 'ID',
                visible: false,
            },
            {
                checkbox: true,
            },
            {
                field: 'location',
                title: 'Location',
                sortable: true,
                formatter: function(value, row, index, field){
                    return renderLink(value.pathstring, value.url);
                }
            },
            {
                field: 'quantity',
                title: 'Stock',
                searchable: false,
                sortable: true,
                formatter: function(value, row, index, field) {
                    return renderLink(value, row.url);
                }
            }
        ],
        url: "{% url 'api-stock-list' %}"
    });

    function selectedStock() {
        return $("#stock-table").bootstrapTable('getSelections');
    }

    $("#multi-item-move").click(function() {

        var items = selectedStock();

        moveStockItems(items,
                  {
                      success: function() {
                          $("#stock-table").bootstrapTable('refresh');
                      }
                  });

        return false;
    });

    function _stock(action) {
        adjustStock({
            action: action,
            items: selectedStock(),
            success: function() {
                $('#stock-table').bootstrapTable('refresh');
            }
        });
    }

    $("#multi-item-stocktake").click(function() {
        _stock('stocktake');
        return false;
    });

    $("#multi-item-take").click(function() {
        _stock('remove');
        return false;
    });

    $("#multi-item-give").click(function() {
        _stock('add');
        return false;
    })

{% endblock %}