{% extends 'base.html' %}
{% load humanize %}
{% load custom_filters  %}
{% load math_extras %}
{% block content %}
<h1 class="text-center display">Calcule Besoin Net</h1>

        {% csrf_token %}
        <form method="GET">
          <input id="default_code" name="default_code"  class="form-control me-2" type="search" placeholder="Search" aria-label="Search" value="{{ default_code }}">
         </form>

        <button class="btn btn-outline-success" name="pdp" id="pdp">Calculer</button>
        <br>
        <br>
        <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" id="tab_cbn">
            <thead>
                <tr>
                    <th tyle="text-align: center;" onclick="sortTable(0)">Code</th>
                    <th tyle="text-align: center;" onclick="sortTable(1)">Désignation</th>
                    <th tyle="text-align: center;" onclick="sortTable(2)">Stock Min</th>
                    <th tyle="text-align: center;" onclick="sortTable(3)">Nouveau Stock Min</th>
                </tr>
            </thead>
            <tbody>
                {% for produit in products %}
                <tr>
                    <td>{{produit.default_code}}</td>
                    <td>{{produit.name}}</td>
                    <td style="text-align: right;">{{produit.product_min_qty|intspace}}</td>
                    <td style="text-align: right;"><input type="number" style="text-align: right;" value="{{produit.product_min_qty}}"></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
 
<script>

function tableToPairs(tableId) {
        const table = document.getElementById(tableId);
        const list = [];

        for (const row of table.tBodies[0].rows) {
            const pair = [row.cells[0].textContent.trim(), row.cells[3].querySelector('input[type="number"]').value];
            list.push(pair);
        }

        return list;
    }

    // Utilisation
    

$(document).ready(function() {
    $('#pdp').click(function() {
        const listFromTable = tableToPairs("tab_cbn");
        if(listFromTable.length==0)
        {
            alert("Aucun produit sélectionné");
        }
        else
        {
            
          $.ajax({
                url: '/Stock_min/',  // L'URL de la vue Django qui va traiter la requête
                type: 'POST',
                data: {
                    articles:JSON.stringify(listFromTable),
                    csrfmiddlewaretoken: '{{ csrf_token }}'  // Nécessaire pour les requêtes POST en Django
                },
                success: function(response) {
                    
                    
                    window.location.href = '/Stock_min/'
                },
                error: function(xhr, status, error) {
                    // Gérer les erreurs
                    console.error("Erreur: " + error);
                }
            });
        }
                  
});});

let ascendingOrder = [];

function sortTable(columnIndex) {
  const table = document.getElementById("tab_cbn");
  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)
    {
      cellA = cellA.replace(" ", "");
      cellB = cellB.replace(" ", "");
    }

    
    
    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() {
  // Créez un nouveau tableau sans les <input> pour l'exportation
  let table = document.getElementById("tab_cbn");
  let cloneTable = table.cloneNode(true);

  // Parcourez les cellules pour remplacer les <input> par leur valeur
  let inputs = cloneTable.querySelectorAll("input[type='number']");
  inputs.forEach(input => {
    let cell = input.parentNode;
    cell.textContent = input.value; // Remplace l'<input> par sa valeur
  });

  // Convertissez le tableau modifié en workbook et exportez-le
  let workbook = XLSX.utils.table_to_book(cloneTable);
  XLSX.writeFile(workbook, 'cbn.xlsx');
}

</script>

{% endblock %}