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

        {% 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 }}">
            <input type="checkbox" id="gamme" name="gamme" onchange="this.form.submit()"  {% if gamme %} checked {% endif %}>
            <label for="gamme">Compossants Importés</label>
            <br>
            <input type="checkbox" id="gamme_uniq" name="gamme_uniq" onchange="this.form.submit()"  {% if gamme_uniq %} checked {% endif %}>
            <label for="gamme_uniq">Compossants Importés Nom Communs</label>
            <br>
            <input type="checkbox" id="can_prd" name="can_prd" onchange="this.form.submit()" {% if can_prd %} checked {% endif %}>
            <label for="can_prd">Quantité planifiable > 0</label>
            <br>
            <input type="checkbox" id="cant_prd" name="cant_prd" onchange="this.form.submit()" {% if cant_prd %} checked {% endif %}>
            <label for="cant_prd">Quantité planifiable <= 0</label>
            <br>
        </form> -->
        <div >
            <table>
                <tr>
                    <td style="width: 90%;">
                       <button  class="btn btn-outline-success" id="valider">Calcule de Besoins</button>
                       
                    </td>
                    
                    <td style="width: 20%; 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>
                    <td ><button  class="btn btn-outline-success" onclick="exportToCSV()">CSV</button>
                </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;display: none;">Id pf</th>
                    <th style="text-align: center;vertical-align: middle;display: none;">Id bom</th>
                    <th style="text-align: center;vertical-align: middle;display: none;">Id oper</th>
                    <th style="text-align: center;vertical-align: middle;display: none;">code bom</th>
                    <th onclick="sortTable(4)" style="text-align: center;vertical-align: middle;">Code </th>
                    <th onclick="sortTable(5)" style="text-align: center;vertical-align: middle;">Désignation </th>
                    <th onclick="sortTable(6)" style="text-align: center;vertical-align: middle;">Nomenclature </th>
                    <th onclick="sortTable(7)" style="text-align: center;vertical-align: middle;">Quantité en Stock </th>
                    <th onclick="sortTable(8)" style="text-align: center;vertical-align: middle;">Quantité prévue </th>
                    <th onclick="sortTable(9)" style="text-align: center;vertical-align: middle;">Stock Min </th>
                    <th onclick="sortTable(10)" style="text-align: center;vertical-align: middle;">Ecart </th>
                    <th onclick="sortTable(11)" style="text-align: center;vertical-align: middle;">Quantité à Planifier </th>
                    <th onclick="sortTable(12)" style="text-align: center;vertical-align: middle;">Quantité Planifier </th>
                    
                </tr>
              </thead>
              <tbody >

                {% for produit in products %}
                    
                    <tr class="clickable-row" >
                        {% if produit.prd_max < 0 or produit.prd_max == 0 %}
                            <td class="bom" style="width: 150px;display: none;color: red;">
                                {{ produit.id }}
                            </td>

                            <td class="bom" style="width: 150px;display: none;color: red;">
                                {{ produit.bom_id }}
                            </td>
                            <td class="bom" style="width: 150px;display: none;color: red;">
                                {{ produit.opr_typr }}
                            </td>
                            <td class="bom" style="width: 150px;display: none;color: red;">
                                {{ produit.bom_code }}
                            </td>
                            
                            <td style="width: 150px;color: red;">
                                {{ produit.default_code }}
                            </td>
                            <td style="width: 500px;color: red;">
                                {{ produit.prd_name }}
                            </td>

                            <td style="width: 500px;color: red;">
                                {{ produit.bom_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|abs_1|intspace }}
                            </td>
                            <td style="text-align: right;width: 100px;color: red;">
                                {{ produit.qty_planifie|intspace }}
                            </td>
                            <td style="text-align: right;width: 100px;color: red;">
                                {{ produit.qty_resulat|intspace }}
                            </td>
                        {% else %}

                            <td class="bom" style="width: 150px;display: none;">
                                {{ produit.id }}
                            </td>

                            <td class="bom" style="width: 150px;display: none;">
                                {{ produit.bom_id }}
                            </td>
                            <td class="bom" style="width: 150px;display: none;">
                                {{ produit.opr_typr }}
                            </td>
                            <td class="bom" style="width: 150px;display: none;">
                                {{ produit.bom_code }}
                            </td>
                            
                            <td style="width: 150px;">
                                {{ produit.default_code }}
                            </td>
                            <td style="width: 500px;">
                                {{ produit.prd_name }}
                            </td>

                            <td style="width: 500px;">
                                {{ produit.bom_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|abs_1|intspace }}
                            </td>
                            <td style="text-align: right;width: 100px;">
                                {{ produit.qty_planifie|intspace }}
                            </td>
                            <td style="text-align: right;width: 100px;">
                                {{ produit.qty_resulat|intspace }}
                            </td>
                        {% endif %}
                    </tr>
                    
                {% endfor %}                    
               
                
              </tbody>
            </table>
          </div>



        

<script>

    
    var pdp_lines = [];
    
    $(document).ready(function() 
    {
       
       $('#valider').click(function() 
       {
            pdp_lines.splice(0, pdp_lines.length);
            $('#pdp_products tbody tr').each(function()
            {
                
                var id_bom = $(this).find('td:eq(1)').text().trim();
                var qty = $(this).find('td:eq(11)').text().trim().replace(' ','');
                //var qty = $(this).find('td:eq(13) input[type="number"]').val();
                var line = {id_bom,qty};
                pdp_lines.push(line);
               
                
                
            });
            //console.log(pdp_lines);
             $.ajax({
                    url: '/appros/',  // URL of the Django view
                    type: 'POST',
                    data: {
                        my_list: JSON.stringify(pdp_lines),
                        'csrfmiddlewaretoken': '{{ csrf_token }}'  // CSRF token for security
                    },
                    success: function(data) {
                        window.location.href = '/appros/'
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                        console.log("Erreur : " + error);
                    }
                }); 
       });
   });

   $(document).ready(function() 
    {
       
       $('#pdp_net').click(function() 
       {
            //alert('hhhh')
             pdp_lines.splice(0, pdp_lines.length);
            $('#pdp_products tbody tr').each(function()
            {
                
                var id_bom = $(this).find('td:eq(1)').text().trim();
                var id_prd = $(this).find('td:eq(2)').text().trim();
                var qty = $(this).find('td:eq(13) input[type="number"]').val();
                var line = {id_bom,qty,id_prd};
                pdp_lines.push(line);
               
                
                
            });

           // console.log(pdp_lines);
            $.ajax({
                    url: '/pdp_semulat/',  // URL of the Django view
                    type: 'POST',
                    data: {
                        my_list: JSON.stringify(pdp_lines),
                        'csrfmiddlewaretoken': '{{ csrf_token }}'  // CSRF token for security
                    },
                    success: function(data) {
                        window.location.href = '/appros/'
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                        console.log("Erreur : " + error);
                    }
                }); 
       }); 
   });

  
   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;

        if (i === 0) {
            // Gérer les en-têtes (première ligne du tableau)
            newRow.insertCell().textContent = cells[4].textContent; // Nom de la colonne 4
            newRow.insertCell().textContent = cells[5].textContent; // Nom de la colonne 5
            newRow.insertCell().textContent = cells[6].textContent; // Nom de la colonne 6
            newRow.insertCell().textContent = cells[12].textContent;// Ajouter le nom de la colonne 11
        } else {
            // Ajouter uniquement les colonnes 4, 5, 6 et 11 pour les données
            newRow.insertCell().textContent = cells[4].textContent; // Colonne 4
            newRow.insertCell().textContent = cells[5].textContent; // Colonne 5
            newRow.insertCell().textContent = cells[6].textContent; // Colonne 6
            newRow.insertCell().textContent = cells[12].textContent; // Colonne 6

            // Récupérer la valeur de l'input dans la colonne 11
            //let input = cells[11].querySelector('input');
            //newRow.insertCell().textContent = input ? input.value : '';
        }
    }

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


        function getCurrentDate() {
        let today = new Date();

        let day = today.getDate();
        let month = today.getMonth() + 1; // Les mois commencent à 0, donc on ajoute 1
        let year = today.getFullYear();

        // Formater la date pour avoir deux chiffres pour le jour et le mois
        day = day < 10 ? '0' + day : day;
        month = month < 10 ? '0' + month : month;

    return day + '-' + month + '-' + year;
}

        function exportToCSV() {
            let table = document.getElementById("pdp_products");
            let rows = table.rows;

            // Définir une en-tête personnalisée pour le CSV
            let csvContent = "picking_type_id/id,bom_id/id,product_id/id,code_PF**,product_qty,product_uom/id\n";  // En-tête personnalisé

            // Ajouter les données du tableau après l'en-tête
            for (let i = 0; i < rows.length; i++) {
                let cells = rows[i].cells;
                let rowContent = [];

                if (i === 0) {
                    // Ignorer la première ligne (en-tête du tableau) pour ne pas la dupliquer
                    continue;
                } else {
                    // Lignes de données
                    rowContent.push("__export__.stock_picking_type_"+cells[2].textContent.trim());
                    rowContent.push("__export__.mrp_bom_"+cells[1].textContent.trim());
                    rowContent.push("__export__.product_product_"+cells[0].textContent.trim());
                    rowContent.push(cells[4].textContent.trim());
                    rowContent.push(cells[12].textContent.trim());
                    // Récupérer la valeur de l'input dans la colonne 3
                    //let input = cells[13].querySelector('input');
                    //rowContent.push(input ? input.value.trim() : "");
                    rowContent.push("product.product_uom_unit");
                }

                // Convertir la ligne en chaîne CSV
                csvContent += rowContent.join(",") + "\n";
            }

            // Créer un fichier CSV et le télécharger
            let blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
            let link = document.createElement("a");
            let url = URL.createObjectURL(blob);
            link.setAttribute("href", url);

            link.setAttribute("download", "pdp_"+getCurrentDate()+".csv");
            link.style.display = "none";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }


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>=7)
    {
        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);
}

const rows = document.querySelectorAll('.clickable-row');
    rows.forEach(row => {
        
        row.addEventListener('click', function() {
            // Accéder à la cellule à l'index 12 (ici l'index commence à 0)
            const cell = event.target; // L'élément exact qui a été cliqué
            const cellIndex = Array.from(row.children).indexOf(cell); // Trouver l'index de la cellule
            
            if(cellIndex!=-1)
            {
                const code_prd = this.cells[4].textContent.trim();
                const code_bom = this.cells[3].textContent.trim(); // `this` fait référence à la ligne cliquée
                //alert('Contenu de la cellule à l\'index 12 : ' + cellContent);
                $.ajax({
                        url: '/prd_pdp_detail/',  // URL of the Django view
                        type: 'POST',
                        data: {
                            code_prd: code_prd,
                            code_bom: code_bom,
                            'csrfmiddlewaretoken': '{{ csrf_token }}'  // CSRF token for security
                        },
                        success: function(data) {
                            window.location.href = '/prd_pdp_detail/'
                        },
                        error: function(xhr, status, error) {
                            // Handle errors
                            console.log("Erreur : " + error);
                        }
                    });

            }
            
            
        });
    });

    document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', function() {
                const row = this.closest('tr'); // Trouver la ligne correspondante
                row.remove(); // Supprimer la ligne
            });
        });
        const table = document.getElementById('pdp_products');
        let draggedRow = null;

        // Ajout des événements pour le glissement
        table.querySelectorAll('tbody tr').forEach(row => {
            const dragHandle = row.querySelector('.drag-handle');

            dragHandle.addEventListener('mousedown', () => {
                row.setAttribute('draggable', 'true'); // Rendre la ligne glissable au clic sur la poignée
            });

            dragHandle.addEventListener('mouseup', () => {
                row.removeAttribute('draggable'); // Désactiver le glissement après relâchement
            });

            row.addEventListener('dragstart', (e) => {
                draggedRow = row;
                row.classList.add('dragging');
            });

            row.addEventListener('dragend', () => {
                row.classList.remove('dragging');
                draggedRow = null;
            });

            row.addEventListener('dragover', (e) => {
                e.preventDefault(); // Permettre le drop
                const targetRow = e.currentTarget;

                if (draggedRow !== targetRow) {
                    const bounding = targetRow.getBoundingClientRect();
                    const offset = e.clientY - bounding.top;
                    const midpoint = bounding.height / 2;

                    if (offset > midpoint) {
                        targetRow.after(draggedRow);
                    } else {
                        targetRow.before(draggedRow);
                    }
                }
            });
        });
</script>
{% endblock %}