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

<h1 class="text-center display">Capacité de Production</h1>

        {% csrf_token %}
        
        <table>
          <tr>
              <td style="width: 90%;">
                <form method="GET">
                  <input id="default_code" name="default_code"  class="form-control me-2" type="search" placeholder="Search" aria-label="Search" value="{{ prd_shearch }}">
                  <input type="checkbox" id="gamme" name="gamme" {% if gamme %} checked {% endif %}>
                  <label for="gamme">Compossants Importés</label>
                  <br>
                  <button class="btn btn-outline-success" type="submit">Calculer</button>
                </form>
              </td>

              <td style="width: 10%; text-align: right;vertical-align: bottom;">
                <strong>Résulat : {{nbr_result}}</strong> 
              </td>

              <td style="width: 0%; vertical-align: bottom;" >
                <button  class="btn btn-outline-success" onclick="exportToExcel()">Excel</button>
              </td>
        
          </tr>
        </table>
        <table class="table table-striped" border="1" id="capacite">
            <thead>
                <tr>
                    <th onclick="sortTable(0)" style="text-align: center;vertical-align: middle;">Code</th>
                    <th onclick="sortTable(1)" style="text-align: center;vertical-align: middle;">Désignation</th>
                    <th onclick="sortTable(2)" style="text-align: center;vertical-align: middle;">Nomenclature</th>
                    <th onclick="sortTable(3)" style="text-align: center;vertical-align: middle;">Quantité Prévue</th>
                    <th onclick="sortTable(4)" style="text-align: center;vertical-align: middle;">Ecart</th>
                    <th onclick="sortTable(5)" style="text-align: center;vertical-align: middle;">Quantité</th>
                </tr>
            </thead>
            <tbody>
                {% for produit in products %}
                <tr>
                    {% if produit.qty < 0  or produit.qty == 0 %}
                        <td style="width: 150px;color: red;">{{produit.code}}</td>
                        <td style="color: red;">{{produit.name}}</td>
                        <td style="width: 170px;color: red;">{{produit.bom}}</td>
                        <td style="width: 80px;text-align: right;color: red;">{{produit.stock_v|intspace}}</td>
                        <td style="width: 80px;text-align: right;color: red;">{{produit.ecart|intspace}}</td>
                        <td style="width: 80px;text-align: right;color: red;">{{produit.qty|intspace}}</td>
                    {% else %}
                        <td style="width: 150px;">{{produit.code}}</td>
                        <td>{{produit.name}}</td>
                        <td style="width: 170px;">{{produit.bom}}</td>
                        <td style="width: 80px;text-align: right;">{{produit.stock_v|intspace}}</td>
                        <td style="width: 80px;text-align: right;">{{produit.ecart|intspace}}</td>
                        <td style="width: 80px;text-align: right;">{{produit.qty|intspace}}</td>
                    {% endif %}


                   
                   
                    
                </tr>
                {% endfor %}
            </tbody>
        </table>
<script>
    let ascendingOrder = [];

function sortTable(columnIndex) {
  const table = document.getElementById("capacite");
  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===3||columnIndex===4||columnIndex===5)
    {
        cellA = cellA.replace(/ /g, "");
        cellB = cellB.replace(/ /g, "");
    }

    
    
    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("capacite");

    // 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.trim(); // Colonne 3
        newRow.insertCell().textContent = cells[1].textContent.trim(); // Colonne 1     
        newRow.insertCell().textContent = cells[2].textContent.trim(); // Colonne 3
        newRow.insertCell().textContent = cells[3].textContent.replace(/ /g,"") // Colonne 1
        newRow.insertCell().textContent = cells[4].textContent.replace(/ /g,"") // Colonne 3
        newRow.insertCell().textContent = cells[5].textContent.replace(/ /g,"") // Colonne 1
        
                   
    }

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

{% endblock %}