{% extends 'base.html' %}
{% load humanize %}
{% load custom_filters  %}
{% load math_extras %}
{% block content %}

        <h1 class="text-center display">Détail produit finis </h1>
        

        

        <p><strong>Code produit fini : {{article_pdp}}</strong></p>
        <p><strong>Nom produit fini : {{name_prd}}</strong></p>
        <p><strong>Nomenclature : {{boms}}</strong></p>
        <p><strong>Quantité à planifier : {{should_prd|intspace}}</strong></p>
        <p><strong>Quantité planifiable : {{can_prd|intspace}}</strong></p>
        

        {% csrf_token %}

        <form  method="GET">
                <input type="checkbox" id="gamme" name="gamme" onchange="this.form.submit()" {% if gamme %} checked {% endif %}>
                <label for="newsletter">Articles Importés</label>
                <br>
                
                <input type="checkbox" id="loc_prd" name="loc_prd" onchange="this.form.submit()" {% if loc_prd %} checked {% endif %}>
                <label for="newsletter">Articles Locaux</label>
                <br>
                <input type="checkbox" id="prduc_prd" name="prduc_prd" onchange="this.form.submit()" {% if prduc_prd %} checked {% endif %}>
                <label for="newsletter">Articles Fabriqués</label>
        </form>

        <table class="table table-striped" border="1" id="stock_min">
                <thead>
                <tr>
                        <th style="text-align: center;vertical-align: middle;" onclick="sortTable(0)">Code</th>
                        <th style="text-align: center;vertical-align: middle;" onclick="sortTable(1)">Désignation</th>
                        <th style="text-align: center;vertical-align: middle;width: 100px;" onclick="sortTable(2)">Quantité En stock</th>
                        <th style="text-align: center;vertical-align: middle;width: 100px;" onclick="sortTable(3)">Quantité Disponible</th>
                        <th style="text-align: center;vertical-align: middle;width: 100px;" onclick="sortTable(4)">Quantité planifiable MP</th>
                </tr>
                </thead>
                <tbody>
                        {% for produit in detail %}
                                <tr>
                                        
                                        {% if produit.qty < 0 or produit.qty == 0 %}
                                                <td style="color: red;">{{produit.default_code}}</td>
                                                <td style="color: red;">{{produit.name}}</td>
                                                <td style="text-align: right;color: red;">{{produit.qty_available|intspace}}</td>
                                                <td style="text-align: right;color: red;">{{produit.virtual_available|intspace}}</td>
                                                <td style="text-align: right;width: 100px;color: red;">{{ produit.qty|intspace }}</td>
                                        {% else %}
                                                <td >{{produit.default_code}}</td>
                                                <td >{{produit.name}}</td>
                                                <td style="text-align: right;">{{produit.qty_available|intspace}}</td>
                                                <td style="text-align: right;">{{produit.virtual_available|intspace}}</td>
                                                <td style="text-align: right;width: 100px;">{{ produit.qty|intspace }}</td>
                                        {% endif %}
                                        
                                </tr>
                        {% endfor %}
                </tbody>
        </table>

<script>
        let ascendingOrder = [];

function sortTable(columnIndex) 
{
  const table = document.getElementById("stock_min");
  const rows = Array.from(table.rows).slice(1); // Exclut l'en-tête
  const headers = table.querySelectorAll("th");

  // Initialiser l'état de tri pour la colonne si elle n'a jamais été triée
  if (ascendingOrder[columnIndex] === undefined) {
    ascendingOrder[columnIndex] = true;
  }

  // Utiliser l'état de tri actuel pour la colonne
  const ascending = ascendingOrder[columnIndex];

  rows.sort((rowA, rowB) => {
    var cellA = rowA.cells[columnIndex].innerText;
    var cellB = rowB.cells[columnIndex].innerText;
    
    if(columnIndex===2||columnIndex===3||columnIndex===4)
    {
      cellA = cellA.replace(/ /g, "");
      cellB = cellB.replace(/ /g, "");
      //console.log(cellA,"|",cellB)
    }

    
    
    const a = isNaN(cellA) ? cellA.toLowerCase() : parseFloat(cellA);
    const b = isNaN(cellB) ? cellB.toLowerCase() : parseFloat(cellB);

    return ascending ? (a > b ? 1 : -1) : (a < b ? 1 : -1);
  });

  // Alterner l'ordre pour la prochaine utilisation
  ascendingOrder[columnIndex] = !ascending;

  // Réinsérer les lignes triées dans le tableau
  rows.forEach(row => table.tBodies[0].appendChild(row));
  headers.forEach((header) => {
    const arrow = header.querySelector('.sort-arrow');
    if (arrow) {
      arrow.remove(); // Supprimer la flèche des autres colonnes
    }
  });

  // Ajouter la flèche à la colonne triée
  const currentHeader = headers[columnIndex];
  const arrow = document.createElement('span');
  arrow.classList.add('sort-arrow');
  arrow.innerHTML = ascending ? '↑' : '↓'; // Choisir la flèche selon l'ordre du tri
  currentHeader.appendChild(arrow);
}
</script>

{% endblock %}