{% extends 'kfet/base_col_2.html' %}
{% load static kfet_tags %}

{% block extra_head %}
<script type="text/javascript" src="{% static 'kfet/vendor/Chart.min.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/statistic.js' %}"></script>
{% endblock %}

{% block title %}Article - {{ article.name }}{% endblock %}
{% block header-title %}Informations sur l'article {{ article.name }}{% endblock %}

{% block fixed %}

<aside>
  <div class="heading">
    <div>{{ article.name }}</div>
    <div class="sub">{{ article.category }}</div>
  </div>
  <div class="buttons">
    <a class="btn btn-default" href="{% url 'kfet.article.update' article.pk %}">
      <span class="glyphicon glyphicon-cog"></span><span>Éditer</span>
    </a>
    {% if perms.kfet.delete_account %}
    <button class="btn btn-default" id="button-delete">
      <span class="glyphicon glyphicon-remove"></span><span>Supprimer</span>
    </button>
    <form method="post" action="{% url 'kfet.article.delete' article.pk %}" id="article-delete-form">
      {% csrf_token %}
    </form>
    {% endif %}
  </div>
  <div class="text">
    <ul class="list-unstyled">
      <li>
        <b>Prix:</b> <span>{{ article.price }}€</span>
        <span data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-question-sign"
          title="Hors réduction COF"></span>
      </li>
      <li><b>Stock:</b> {{ article.stock }}</li>
      <li><b>En vente:</b> {{ article.is_sold|yesno|title }}</li>
      <li><b>Affiché:</b> {{ article.hidden|yesno|title }}</li>
    </ul>
  </div>
</aside>

<div class="buttons tabs-buttons">
  <div>
    <a href="#tab_summary" data-toggle="pill" class="btn btn-primary-w focus">
      Résumé
      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
  <div>
    <a href="#tab_inventories" data-toggle="pill" class="btn btn-primary-w">
      Inventaires
      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
  <div>
    <a href="#tab_suppliers" data-toggle="pill" class="btn btn-primary-w">
      Fournisseurs
      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>

{% endblock %}

{% block main %}

<div class="tab-content">

  <div id="tab_summary" class="tab-pane fade in active">

    <section>
      <div>
        <div class="row">
          <div class="col-lg-6">

            <h3>Inventaires récents</h3>
            <div class="table-responsive">
              {% include "kfet/article_inventories_snippet.html" with inventoryarts=inventoryarts|slice:5 %}
            </div>

          </div><!-- col -->
          <div class="col-lg-6">

            <h3>Derniers prix fournisseurs</h3>
            <div class="table-responsive">
              {% include "kfet/article_suppliers_snippet.html" with supplierarts=supplierarts|slice:5 %}
            </div>

          </div><!-- col -->
        </div><!-- row -->
      </div>
    </section>

    <section>
      <div>
        <h3>Ventes</h3>
        <div id="stat_last"></div>
      </div>
    </section>

  </div><!-- summary tab -->

  <div id="tab_inventories" class="tab-pane fade">
    <div class="table-responsive">
      {% include "kfet/article_inventories_snippet.html" %}
    </div>
  </div><!-- inventories tab -->

  <div id="tab_suppliers" class="tab-pane fade">
    <div class="table-responsive">
      {% include "kfet/article_suppliers_snippet.html" %}
    </div>
  </div><!-- suppliers tab -->

</div>

<script type="text/javascript">
  $(document).ready(function () {
    var stat_last = new StatsGroup(
      "{% url 'kfet.article.stat.sales.list' article.id %}",
      $("#stat_last")
    );


    $('[data-toggle="tooltip"]').tooltip();

    $("table .more").click(function () {
      $(this).hide();
      $(this).siblings(".hidden").removeClass("hidden");
    });

    let tabs_buttons = $('.tabs-buttons a');
    tabs_buttons.click(function () {
      tabs_buttons.removeClass('focus');
      $(this).addClass('focus');
    });

    // 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>
          </div>
        `,
        backgroundDismiss: true,
        animation: 'top',
        closeAnimation: 'bottom',
        keyboardEnabled: true,
        confirm: function () {
          $('#article-delete-form').submit();
        }
      })
    })
  });
</script>

{% endblock %}