{% extends './template.html' %}
{% load static %}
{% block actualicon %}<div class="navo_si2 nav-item text-primary2"><small><a href="#">Stocks</a></small></div>{% endblock %}


<ul class="nav side_nav siNA2" data-show='1'>
  <li class="nav-item {% if links2 == None %} active {% endif %}">
    <a class="nav-link" href="/stock/">
      <i class="material-icons">shopping_cart</i>
      <p>Produits</p>
    </a>
  </li>
  <li class="nav-item {% if links2 == 2 %} active {% endif %}">
    <a class="nav-link" href="/stock/trans/">
      <i class="material-icons">show_chart</i>
      <p>Transactions</p>
    </a>
  </li>
  <li class="nav-item {% if links2 == 3 %} active {% endif %}">
    <a class="nav-link" href="/stock/benef/">
      <i class="material-icons">attach_money</i>
      <p>Bénéfices</p>
    </a>
  </li>
  <li class="nav-item {% if links2 == 4 %} active {% endif %}">
    <a class="nav-link" href="/stock/rapport/">
      <i class="material-icons">analytics</i>
      <p>Rapports</p>
    </a>
  </li>
  <li class="nav-item {% if links2 == 5 %} active {% endif %}">
    <a class="nav-link" href="/stock/ravit/">
      <i class="material-icons">bubble_chart</i>
              <p><!--
                <b>Ravitaillement</b>
                <b style="margin-left:5px;" class="fa fa-exclamation-triangle"></b>-->
                Ravitaillement
              </p>
            </a>
          </li>
          <li class="nav-item {% if links2 == 6 %} active {% endif %}">
            <a class="nav-link" href="/stock/promo/">
              <i class="material-icons">
                <span class="material-icons">forward_to_inbox</span>
              </i>
              <p>Promotion<!--
                <b>Promotion</b>
                <b style="margin-left:5px;" class="fa fa-star"></b> -->
              </p>
            </a>
          </li>
        </ul>



        {% block content %}
        <div class="container-fluid">

          {% block navbar_content %}
          <div class="row">
            <div class="px-2"> <a href="/stock/add/" class="badge btn-primary2 text-white"><i class="material-icons">add</i> Ajouter un Produit</a></div>
            <!-- <div class="px-2"> <a href="/stock/type_add/" class="badge btn-primary2 text-white"><i class="material-icons">add</i> Ajouter une Catégorie</a></div> -->
          </div>
          {% endblock %}

          {% block main_content %}
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header"> 
                  <h4 class="card-title ">Liste des Produits : <b> {{actual_institution}} </b></h4>
                  {% if search != None %} <span class="badge btn-primary2 text-white">{{search}}</span> {% else %}  {% endif %}
                  <form method="POST" action="/stock/search/" class="navbar-form">{% csrf_token %}
                    <div class="input-group no-border"> 
                      <input type="text" name="search" class="form-control"  placeholder="Rechercher un Produit" >
                      <button type="submit" class="btn btn-white btn-round btn-just-icon">
                        <i class="material-icons">search</i>
                        <div class="ripple-container"></div>
                      </button>
                    </div>
                  </form>
                <!-- <div style="display:flex;justify-content: space-between;">
                  <p class="card-category"> <span class="btn text-primary2" style="background-color:#fff;">Tris Avancés</span> <span class="btn text-primary2" style="background-color:#fff;">Filtres</span> </p>
                </div> -->
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table id="actu-table" class="table ">
                    <thead class=" text-primary2">
                      <th></th>
                      <th>
                        Code
                      </th>
                      <th>
                        Nom
                      </th>
                      <th>
                        Prix
                      </th>
                      <th>
                        Qte Dispo
                      </th>
                      <th>
                        Type
                      </th>
                      <th>
                        
                      </th>
                      <th class="text-success">
                      </th>
                    </thead>
                    <tbody>
                      {% for product in pages %}
                      <tr>
                        <td><a href="/stock/edit/{{product.id}}/"> <i class="fa fa-pencil"></i> </a></td>
                        <td>
                          <a class="text-primary2" href="/stock/edit/{{product.id}}/">{{product.m_code}}</a>
                        </td>
                        <td>
                          {{product.m_name}}
                        </td>
                        <td>
                          {{product.m_price}} XAF
                        </td>
                        <td>
                          <span class="text-primary2">Stock :</span> {{product.m_qte}} {% if product.m_unite != None %} {{product.m_unite}} {% endif %}
                        </td>
                        <td>
                          {{product.m_type}} 
                        </td>
                        <td>
                          <a href="/stock/trans/{{product.id}}/" class="badge btn-info">Transactions</a>
                        </td>
                        <td>
                          <a href="/stock/edit/{{product.id}}/" class="badge badge-success"><i style="font-size:14px;" class="material-icons">edit</i></a>
                          <a href="/admin/stocks/product/{{product.id}}/delete/" class="badge badge-danger"><i style="font-size:14px;" class="material-icons">delete</i></a>

                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                <div id="list-table">

                </div>
              </div>
              <div>
                <nav class="px-2">
                  <small> Page {{pages.number}} sur {{num_pages}} </small>
                  <ul class='pagination' style='display:flex;overflow-x: auto;'>
                    <li>
                      {% if pages.number > 1 %}
                      <a style='color:#333;' class="btn btn-white" href="?page={{pages.previous_page_number}}" aria-label="Previous"><span aria-hidden="true">&laquo;</span>
                      </a>
                      {% endif %}
                    </li>
                    {% for num in page_range %}
                    <li><a class="btn {% if pages.number == num %} btn-success {% else %} btn btn-white text-dark {% endif %}" href="?page={{num}}">{{num}}</a></li>
                    {% endfor %}
                    <li>
                      {% if pages.number < num_pages %}
                      <a style='color:#333;' class="btn btn-white" href="?page={{pages.next_page_number}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                      {% endif %}
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
            </div>
          </div>
        {% endblock %}

        </div>
        {% endblock %}

          {% block script %}
          <script type="text/javascript">
            actuTab=document.getElementById("actu-table");
            listTab=document.getElementById("list-table");
            actuBod=actuTab.getElementsByTagName("tbody")[0];
            acturows = actuBod.getElementsByTagName("tr")

            tmp = ""
/*for (var i=0;i<acturows.length;i++){
  tds = acturows[i].getElementsByTagName("td")
  tmp += "<div style='border-bottom:1px solid #aaa;' class='py-2 col-12'>"
  tmp += "<div> <span class='badge badge-primary2'>"+tds[1].innerHTML+" </span></div>"

  tmp += "<div> <span class=''>"+tds[2].innerHTML+" </span></div>"
  tmp += "<div class='col-12 d-flex flex-wrap'><div> <span class='badge badge-success'>"+tds[3].innerHTML+" </span></div>"

  tmp += "<div> <span class='badge '>"+tds[4].innerHTML+" </span></div>"

  tmp += "<div> <span class='badge '>"+tds[5].innerHTML+" </span></div></div>"
  tmp += "</div>"
}*/
            listTab.innerHTML = tmp

            function deleteItem(name_o,id_o){
              alertify.confirm("<b>Confirmer la Suppression de l'Article </b>",`<div class='h4 text-danger'>  ${name_o} </div>`,function(){},function(){})
            }


          </script>
          {% endblock %}
