{% extends "kfet/base_col_2.html" %}

{% block title %}Inventaire #{{ inventory.pk }}{% endblock %}
{% block header-title %}Inventaire #{{ inventory.pk }}{% endblock %}

{% block fixed %}

<aside>
  <div class="text">
    <ul class="list-unstyled">
      <li><b>Date :</b> {{ inventory.at }}</li>
      <li><b>Par :</b> {{ inventory.by }}</li>
      {% if inventory.order %}
      <li>
        <b>Commande relative :</b>
        <a href="{% url 'kfet.order.read' inventory.order.pk %}">
          #{{ inventory.order.pk }}
        </a>
      </li>
      {% endif %}
    </ul>
    {% if perms.kfet.delete_inventory %}
    <hr>
    <div class="buttons">
    <button class="btn btn-default" id="button-delete">
      <span class="glyphicon glyphicon-remove"></span><span>Annuler l'inventaire</span>
    </button>
    <form method="post" action="{% url 'kfet.inventory.delete' inventory.pk %}" id="inventory-delete-form">
      {% csrf_token %}
    </form>
    {% endif %}
    </div>
  </div>
</aside>

{% endblock %}

{% block main %}

<div class="table-responsive">
  <table
      class="table table-condensed table-hover table-striped sortable"
      {# Initial sort: [(article.name,asc)] #}
      data-sortlist="[[0,0]]">
    <thead>
      <tr>
        <td>Article</td>
        <td>Stock avant</td>
        <td>Stock après</td>
        <td>Erreur</td>
      </tr>
    </thead>
    {% regroup inventoryarts by article.category as category_list %}
    {% for category in category_list %}
      <tbody class="tablesorter-no-sort">
        <tr class="section">
          <td colspan="4">{{ category.grouper.name }}</td>
        </tr>
      </tbody>
      <tbody>
        {% for inventoryart in category.list %}
          <tr>
            <td>
              <a href="{% url "kfet.article.read" inventoryart.article.id %}">
                {{ inventoryart.article.name }}
              </a>
            </td>
            <td>{{ inventoryart.stock_old }}</td>
            <td>{{ inventoryart.stock_new }}</td>
            <td>{{ inventoryart.stock_error }}</td>
          </tr>
        {% endfor %}
      </tbody>
    {% endfor %}
  </table>
</div>

<script type="text/javascript">
$( function() {
    // Delete button
    $('#button-delete').click(function() {
      $.confirm({
        title: 'Confirmer la suppression',
        content: `
          <div class="warning">
          <span class='glyphicon glyphicon-warning-sign'></span><span>Cette opération est irréversible !</span>
          <br>
          <span>N.B. : seuls les articles dont c'est le <b>dernier</b> inventaire en date seront affectés.</span>
          </div>
        `,
        backgroundDismiss: true,
        animation: 'top',
        closeAnimation: 'bottom',
        keyboardEnabled: true,
        confirm: function() {
          $('#inventory-delete-form').submit();
        }
      })
    })
});
</script>

{% endblock %}
