{% extends 'base.html' %}
{% load humanize %}
{% load custom_filters  %}
{% block content %}
<h1 class="text-center display">Couverture des stocks produits finis</h1>

<br/>
<form method="GET">
  <table>
    <tr>
      <td>
        <div>
          <input  id="default_code" name="default_code" class="form-control me-2" type="search" placeholder="Search" aria-label="Search" value="{{ form.default_code.value|default:'' }}">
          <label for="">Recherche Avancé</label>
          <br>
          <select  name="chiffre" style="height: 35px;width: auto;" id="chiffre" value="{{ form.chiffre.value|default:'' }}">
            <option value=""></option>
            <option value="qty_available">Quantité en stock</option>
            <option value="virtual_available">Quantité prévue</option>
            <option value="product_min_qty">Stock Min</option>
            <option value="ecar">Ecart</option>
            <option value="couvert">Couverture</option>
            <option value="prd_max">Quantité planifiable PF</option>
          </select>
          
          <select  name="regle" id="regle" style="height: 35px;" value="{{ form.regle.value|default:'' }}">
            <option value="egal">est égal à</option>
            <option value="notegal">est différent de</option>
            <option value="sup">supérieur à</option>
            <option value="inf">inférieur à</option>
            <option value="supegal">supérieur ou égal à</option>
            <option value="infegal">inférieur ou égal à</option>
          </select>
          
          <input type="number" style="height: 35px;" id="val" name="val" value="{{ form.val.value|default:0 }}">

          <button class="btn btn-outline-success" type="submit">Filtrer</button>
        </div>
      </td>
    </tr>
  </table>
</form>


<table>
  <tr>
      <td style="width: 90%;">
        <button class="btn btn-outline-success" name="pdp" id="pdp">Génération du PDP</button>
      </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>



<div >
  <table class="table table-striped"  name="pdp_products" id="pdp_products">
    <thead>
      <tr >
          <th style="vertical-align: middle;"><input type="checkbox" id="selectAll"></th>
          <th style="text-align: center;vertical-align: middle;display: none;">id</th>
          <th onclick="sortTable(2)" style="text-align: center;vertical-align: middle;">Code </th>
          <th onclick="sortTable(3)" style="text-align: center;vertical-align: middle;">Désignation </th>
          <th onclick="sortTable(4)" style="text-align: center;vertical-align: middle;">Quantité en Stock </th>
          <th onclick="sortTable(5)" style="text-align: center;vertical-align: middle;">Quantité prévue </th>
          <th onclick="sortTable(6)" style="text-align: center;vertical-align: middle;">Stock Min </th>
          <th onclick="sortTable(7)" style="text-align: center;vertical-align: middle;">Ecart </th>
          <th onclick="sortTable(8)" style="text-align: center;vertical-align: middle;">Couverture </th>
          <th onclick="sortTable(9)" style="text-align: center;vertical-align: middle;">Quantité planifiable PF </th>
      </tr>
    </thead>
    <tbody >
      {% for produit in produits %}
      
      <tr>


        <td style="width: 50px;">
          <input type="checkbox" class="checkbox">
        </td>

        {% if produit.couvert < 50 %}
          <td style="width: 50px;display: none;color: red;">
            {{ produit.id }}
          </td>
          <td style="width: 150px;color: red;">
            {{ produit.default_code }}
            
            
          </td>
          <td style="width: 600px;color: red;">
            {{ produit.name }}
            
          </td>
          <td style="text-align: right;width: 100px;color: red;">
            {{ produit.qty_available|intspace   }}
            
          </td>
          <td style="text-align: right;width: 100px;color: red;">
            {{ produit.virtual_available|intspace   }}
            
          </td>
          <td style="text-align: right;width: 100px;color: red;">
            {{ produit.product_min_qty|intspace }}
            
          </td>
          <td style="text-align: right;width: 100px;color: red;">
            {{ produit.ecar|intspace }}
            
          </td>

          <td style="text-align: right;width: 100px;color: red;">
            {{ produit.couvert|floatformat:2  }} %
            
          </td>

          <td style="text-align: right;width: 100px;color: red;">
            {{ produit.prd_max|intspace }}
            
          </td>
      
          {% elif produit.couvert < 100 %}
          <td style="width: 50px;display: none;color: orange;">
            {{ produit.id }}
          </td>
          <td style="width: 150px;color: orange;">
            {{ produit.default_code }}
            
            
          </td>
          <td style="width: 600px;color: orange;">
            {{ produit.name }}
            
          </td>
          <td style="text-align: right;width: 100px;color: orange;">
            {{ produit.qty_available|intspace   }}
            
          </td>
          <td style="text-align: right;width: 100px;color: orange;">
            {{ produit.virtual_available|intspace   }}
            
          </td>
          <td style="text-align: right;width: 100px;color: orange;">
            {{ produit.product_min_qty|intspace }}
            
          </td>
          <td style="text-align: right;width: 100px;color: orange;">
            {{ produit.ecar|intspace }}
            
          </td>

          <td style="text-align: right;width: 100px;color: orange;">
            {{ produit.couvert|floatformat:2  }} %
            
          </td>

          <td style="text-align: right;width: 100px;color: orange;">
            {{ produit.prd_max|intspace }}
            
          </td>
        {% else %}
          <td style="width: 50px;display: none;">
            {{ produit.id }}
          </td>
          <td style="width: 150px;">
            {{ produit.default_code }}
            
            
          </td>
          <td style="width: 600px;">
            {{ 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.product_min_qty|intspace }}
            
          </td>
          <td style="text-align: right;width: 100px;">
            {{ produit.ecar|intspace }}
            
          </td>

          <td style="text-align: right;width: 100px;">
            {{ produit.couvert|floatformat:2  }} %
            
          </td>

          <td style="text-align: right;width: 100px;">
            {{ produit.prd_max|intspace }}
            
          </td>
          {% endif %}

          
          
      </tr>
     
      {% endfor %}
    </tbody>
  </table>
</div>








<script>

var liste_products = [];

  $(document).ready(function() {
    // Quand une case est cochée ou décochée
    $('.checkbox').on('change', function() {


      let isChecked = $(this).is(':checked');
      let closestText = $(this).closest('tr').find('td').eq(1).text().trim(); 
      if(isChecked)       
        liste_products.push(closestText);
      else
        liste_products = liste_products.filter(prd => prd !== closestText);
      console.log(liste_products);
      $('#selectAll').prop('checked', false);
      });
  
    });
    
    $(document).ready(function() {
    // Gestionnaire d'événement pour la case à cocher "Tout Sélectionner"
    $('#selectAll').on('change', function() {
        // Vérifie l'état de la case à cocher "Tout Sélectionner"
        let isChecked = $(this).is(':checked');
        // Change l'état de toutes les cases à cocher dans le tableau
        $('.checkbox').prop('checked', isChecked);

        if(isChecked==false)
          liste_products.splice(0, liste_products.length);
        else
        {
          $('#pdp_products tbody tr').each(function() {
            let text = $(this).find('td').eq(1).text().trim();  // .eq(0) pour la première colonne
            liste_products.push(text);
        });
        }
        console.log(liste_products);

    });
  });

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


  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===4||columnIndex===5||columnIndex===6||columnIndex===7||columnIndex===9)
      {
        cellA = cellA.replace(/ /g, "");
        cellB = cellB.replace(/ /g, "");
      }

      if(columnIndex===8)
      {
        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() {
            // 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[2].textContent; // Colonne 3
                newRow.insertCell().textContent = cells[3].textContent; // Colonne 1
                newRow.insertCell().textContent = cells[4].textContent.replace(/ /g,""); // Colonne 3
                newRow.insertCell().textContent = cells[5].textContent.replace(/ /g,""); // Colonne 1
                newRow.insertCell().textContent = cells[6].textContent.replace(/ /g,""); // Colonne 3
                newRow.insertCell().textContent = cells[7].textContent.replace(/ /g,""); // Colonne 1
                newRow.insertCell().textContent = cells[8].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, 'couverture.xlsx');
        }
</script>

{% endblock %}