{% extends "stock/stock_app_base.html" %}
{% load static %}
{% block content %}

{% load qr_code %}

<div class='row'>
<div class='col-sm-6'>
    <h3>Stock Item Details</h3>
    <p><i>{{ item.quantity }} &times {{ item.part.name }}</i></p>
</div>
<div class='col-sm-6'>
    <h3>
    <div style='float: right;'>
    <div 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">
          {% if item.in_stock %}
          <li><a href="#" id='stock-edit' title='Edit stock item'>Edit stock item</a></li>
          <li><a href="#" id='stock-move' title='Move stock item'>Move stock item</a></li>
          <li><a href='#' id='stock-add' title='Add stock'>Add to stock</a></li>
          <li><a href='#' id='stock-remove' title='Remove stock'>Remove from stock</a></li>
          <li><a href='#' id='stock-stocktake' title='Count stock'>Stocktake</a></li>
          {% endif %}
          <li><a href="#" id='stock-delete' title='Delete stock item'>Delete stock item</a></li>
        </ul>
    </div>
    </div>
    </h3>
</div>
</div>

{% qr_from_text item.uuid size="s" image_format="png" error_correction="L" %}

<table class="table table-striped">
<tr>
    <td>Part</td>
    <td><a href="{% url 'part-stock' item.part.id %}">{{ item.part.name }}</td>
</tr>
<tr>
    <td>UUID</td>
    <td>{{ item.uuid }}</td>
</tr>
{% if item.belongs_to %}
<tr>
    <td>Belongs To</td>
    <td><a href="{% url 'stock-item-detail' item.belongs_to.id %}">{{ item.belongs_to }}</a></td>
</tr>
{% elif item.location %}
<tr>
    <td>Location</td>
    <td><a href="{% url 'stock-location-detail' item.location.id %}">{{ item.location.name }}</a></td>
</tr>
{% endif %}
{% if item.serial %}
<tr>
    <td>Serial</td>
    <td>{{ item.serial }}</td>
</tr>
{% else %}
<tr>
    <td>Quantity</td>
    <td>{{ item.quantity }}</td>
</tr>
{% endif %}
{% if item.batch %}
<tr>
    <td>Batch</td>
    <td>{{ item.batch }}</td>
</tr>
{% endif %}
{% if item.customer %}
<tr>
    <td>Customer</td>
    <td>{{ item.customer.name }}</td>
</tr>
{% endif %}
{% if item.URL %}
<tr>
    <td>URL</td>
    <td><a href="{{ item.URL }}">{{ item.URL }}</a></td>
</tr>
{% endif %}
{% if item.supplier_part %}
<tr>
    <td>Supplier Part</td>
    <td><a href="{% url 'supplier-part-detail' item.supplier_part.id %}">{{ item.supplier_part.SKU }}</a></td>
</tr>
{% endif %}
<tr>
    <td>Updated</td>
    <td>{{ item.updated }}</td>
</tr>
{% if item.stocktake_date %}
<tr>
    <td>Stocktake</td>
    <td>{{ item.stocktake_date }} <span class='badge'>{{ item.stocktake_user }}</span></td>
</tr>
{% endif %}
<tr>
    <td>Status</td>
    <td>{{ item.get_status_display }}</td>
</tr>
{% if item.notes %}
<tr>
    <td>Notes</td>
    <td>{{ item.notes }}</td>
</tr>
{% endif %}
</table>

{% if item.has_tracking_info %}
<hr>
<div class="panel-group">
 <div class="panel panel-default">
   <div class="panel-heading">
     <h4 class="panel-title">
       <a data-toggle="collapse" href="#collapse1">Stock Tracking</a><span class='badge'>{{ item.tracking_info.all|length }}</span>
     </h4>
   </div>
   <div id="collapse1" class="panel-collapse collapse">
     <div class="panel-body">
         <table class='table table-condensed table-striped' id='track-table'>
         </table>
     </div>
   </div>
 </div>
</div>
{% endif %}
{% endblock %}
{% block js_ready %}
{{ block.super }}
    $("#stock-edit").click(function () {
        launchModalForm(
                        "{% url 'stock-item-edit' item.id %}",
                        {
                            reload: true,
                            submit_text: "Save",
                        });
    });

    {% if item.in_stock %}
    $("#stock-move").click(function() {
        launchModalForm(
                        "{% url 'stock-item-move' item.id %}",
                        {
                            reload: true,
                            submit_text: "Move"
                        });
        });

    function itemAdjust(action) {
        adjustStock({
            query: {
                pk: {{ item.id }},
            },
            action: action,
            success: function() {
                location.reload();
            }
        });
    }

    $("#stock-stocktake").click(function() {
        itemAdjust('stocktake');
        return false;
    });

    $('#stock-remove').click(function() {
        itemAdjust('remove');
        return false;
    });

    $('#stock-add').click(function() {
        itemAdjust('add');
        return false;
    });

    {% endif %}

    $("#stock-delete").click(function () {
        launchDeleteForm(
                         "{% url 'stock-item-delete' item.id %}",
                         {
                             redirect: "{% url 'part-stock' item.part.id %}"
                         });
    });

    $('#track-table').bootstrapTable({
        sortable: true,
        search: true,
        method: 'get',
        queryParams: function(p) {
            return {
                item: {{ item.pk }},
            }
        },
        columns: [
            {
                field: 'date',
                title: 'Date',
                sortable: true,
                formatter: function(value, row, index, field) {
                    var m = moment(value);
                    if (m.isValid()) {
                        var html = m.format('dddd MMMM Do YYYY') + '<br>' + m.format('h:mm a');
                        return html;
                    }

                    return 'N/A';
                }
            },
            {
                field: 'title',
                title: 'Description',
                sortable: true,
                formatter: function(value, row, index, field) {
                    var html = "<b>" + value + "</b>";

                    if (row.notes) {
                        html += "<br><i>" + row.notes + "</i>";
                    }

                    return html;
                }
            },
            {
                field: 'quantity',
                title: 'Quantity',
            },
            {
                sortable: true,
                field: 'user',
                title: 'User',
                formatter: function(value, row, index, field) {
                    if (value)
                    {
                        // TODO - Format the user's first and last names
                        return value.username;
                    }
                    else
                    {
                        return "No user information";
                    }
                }
            }
        ],
        url: "{% url 'api-stock-track' %}",
    })

{% endblock %}