{% extends './stocks.html' %}
{% load static %}

{% block content %}
        <div class="container-fluid">
          <div class="row">
            <div> <a href="/sell/" class="btn btn-primary"> <i class="fa fa-plus"></i> Enregistrer Achat </a></div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header bg-primary text-white">
                  <h4 class="card-title text-white ">Liste des Transactions - <b> {{actual_institution}} </b></h4>
                  <!-- /stock/trans/sort/ -->
                <form method="POST" class="pt-3" action="/stock/trans/sort/" style="display:flex; color: #fff;">
                  {% csrf_token %}
                  <p class=" text-white"> <label class=" text-white">Date de Debut</label> <input style="color:#fff;" value="{{date_start}}" name="date_start" type='date' class="form-control" > </p>
                  <p class=" text-white px-2"> <label class=" text-white">Date de Fin</label> <input style="color:#fff;" value="{{date_end}}" name="date_end" type='date' class="form-control" > </p>
                  <p class="px-3 pb-1">
                    <label class=" text-white"> Article  </label>
                    <select value="{{produit}}" name="produit" class="text-white   form-control">
                      <option style="color:#333;" value="0">Tous</option>
                      {% for p in products %}
                      <option value="{{p.id}}" {% if p.id == produit %} selected {% endif %} style="color:#333;">{{p.m_code}} - {{p}}</option>
                      {% endfor %}
                    </select>
                  </p>
                  <p class="pt-2"> <label>&nbsp;</label> <input type="submit" value="Filtrer" class="btn bg-light text-dark" name=""> </p>
                  </form> 
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table">
                      <thead class=" text-primary">
                        <th>
                          Code
                        </th>
                        <th style="min-width:120px;">
                          Date
                        </th>
                        <th>
                          Montant
                        </th>
                        <th>
                          Nature
                        </th>
                        <th>
                          Staff
                        </th>
                        <th>
                          Articles
                        </th>
                        <th>
                          Client
                        </th>
                        <th>
                          
                        </th>
                      </thead>
                      <tbody>
                        {% for t in pages %}
                        <tr>
                          <td>
                            <a href="#">{{t.m_code}}</a>
                          </td>
                          <td>
                            {{t.m_date}}
                          </td>
                          <td>
                            {{t.montant}} XAF
                          </td>
                          <td>
                            {{t.readable_sense}}
                          </td>
                          <td class="text-secondary">
                            {{t.m_staff.first_name}}&nbsp;{{t.m_staff.last_name}}
                          </td>
                          <td class="text-success">
                            
                          </td>
                          <td class="text-secondary">
                            {{t.client}}
                          </td>
                          <!--
                          <td class="text-primary">
                            Infos
                          </td>-->
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
                <div>
                                    <nav class="px-2">
                    <small> Page {{pages.number}} sur {{num_pages}} </small>
                    <ul class='pagination' style='display:flex;'>
                      <li>
                        {% if pages.number > 1 %}
                        <a style='color:#333;' class="btn" 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 {% endif %}" href="?page={{num}}">{{num}}</a></li>
                      {% endfor %}
                      <li>
                        {% if pages.number < num_pages %}
                        <a style='color:#333;' class="btn" href="?page={{pages.next_page_number}}" aria-label="Next">
                          <span aria-hidden="true">&raquo;</span>
                        </a>
                        {% endif %}
                      </li>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
{% endblock %}
