{% extends 'base.html' %}
{% load humanize %}
{% load custom_filters  %}
{% load math_extras %}
{% block content %}
<h1 class="text-center display">Besoins de Production</h1>
        
<br>

        {% csrf_token %}
        <table>
          <tr>
              <td style="width: 90%;"></td>
              <td style="width: 10%; text-align: right;">
                <strong>Résulat : {{nbr_result}}</strong> 
              </td>
              <td style="width: 10%" ><button  class="btn btn-outline-success" onclick="exportToExcel()">Excel</button></td>
              
          </tr>
       </table>
        <table class="table table-striped" border="1" name="pdp_products" id="pdp_products">
            <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;" onclick="sortTable(2)">Quantité en Stock</th>
                  <th style="text-align: center;vertical-align: middle;" onclick="sortTable(3)">Quantité Disponible</th>
                  <th style="text-align: center;vertical-align: middle;" onclick="sortTable(4)">Quantité Nécessaire</th>
                  <th style="text-align: center;vertical-align: middle;" onclick="sortTable(5)">Ecart</th>
              </tr>
            </thead>
            <tbody >
              {% for produit in appros %}
              
              <tr class="clickable-row">
                  <td >
                      {{ produit.code }}
                      
                      
                    </td>
                    <td >
                        {{ produit.name }}
                        
                        
                      </td>
                      
                      <td style="text-align: right;width: 100px;">
                        {{ produit.qty_available|intspace }}
                        
                        
                      </td>
                      <td style="text-align: right;width: 100px;">
                        {{ produit.virtual_available|intspace }}
                        
                        
                      </td> 
                  <td style="text-align: right;width: 100px;">
                    {{ produit.cmp_qty|intspace }}
                    
                    
                  </td>
                  {% if produit.ecar < 0 %}
                  <td style="text-align: right;width: 100px;color: red;">
                    {{ produit.ecar|intspace }}
                    
                  </td>
                  {% else %}
                  <td style="text-align: right;width: 100px;">
                    {{ produit.ecar|intspace }}
                    
                  </td>
                {% endif %}
            
             
              {% endfor %}
            </tbody>
          </table>
        
<script> 
let ascendingOrder = [];
function sortTable(columnIndex) 
{
  const table = document.getElementById("pdp_products");
  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||columnIndex===5)
    {
      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);
}


function exportToExcel() {
            // Récupérer le tableau
            let table = document.getElementById("pdp_products");

            // Créer un tableau temporaire pour les colonnes sélectionnées
            let filteredTable = document.createElement('table');
            let rows = table.rows;

            for (let i = 0; i < rows.length; i++) {
                let newRow = filteredTable.insertRow();
                let cells = rows[i].cells;

                // Ajouter uniquement les colonnes 1 et 3
                
                newRow.insertCell().textContent = cells[0].textContent; // Colonne 3
                newRow.insertCell().textContent = cells[1].textContent; // Colonne 1
                newRow.insertCell().textContent = cells[3].textContent.replace(/ /g,""); // Colonne 3
                newRow.insertCell().textContent = cells[4].textContent.replace(/ /g,""); // Colonne 1
                newRow.insertCell().textContent = cells[5].textContent.replace(/ /g,""); // Colonne 3
                
                //newRow.insertCell().textContent = cells[9].innerText; // Colonne 1                
            }

            // Convertir la table filtrée en Excel
            
            let workbook = XLSX.utils.table_to_book(filteredTable);
            XLSX.writeFile(workbook, 'pdp_besoin.xlsx');
        }

</script>
{% endblock %}