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


        {% csrf_token %}

        <div >
            <button id="valider" name="valider" class="btn btn-outline-success">Calcule de besoins</button>
            <br>
            <br>
            <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</th>
                    <th style="text-align: center;vertical-align: middle;">Code</th>
                    <th style="text-align: center;vertical-align: middle;">Désignation</th>
                    <th style="text-align: center;vertical-align: middle;">Quantité en Stock</th>
                    <th style="text-align: center;vertical-align: middle;">Quantité prévue</th>
                    <th style="text-align: center;vertical-align: middle;">Stock Min</th>
                    <th style="text-align: center;vertical-align: middle;">Nomenclatures</th>
                    <th style="text-align: center;vertical-align: middle;">Quantité à Planifie</th>
                </tr>
              </thead>
              <tbody >
                {% for produit in article_pdp %}
                
                <tr>
                    <td style="width: 150px;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 >
                        <select class="bom"  style="width: 170px;">
                            {% for bom in boms %}
                                {% if bom.product_id.0 == produit.id %}
                                   <option value="{{bom.id}}">{{bom.code}}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </td>
                    <td >
                        <input type="number" class="pdp_qty"  style="text-align: right;width: 100px;" value="{{ produit.ecar|abs_1 }}">
                    </td>
                </tr>
               
                {% endfor %}
              </tbody>
            </table>
          </div>


<!--
        <table width: 100%;>
            <tr>
                <td style ="padding: 10px;">
                    <div>
                        <h1>PDP</h1>
                       
                        <select name="products" id="products" required style="width: 500px;" >
                            <option value=""></option>
                            {% for produit in products %}
                            <option value="{{produit.id}}">[{{produit.code}}] {{produit.name}}</option>
                            {% endfor %}
                        </select>
                        <br>
                        <label for="">Nomenclatures</label>
                        <br>
                        <select name="boms" id="boms" required style="width: 150px;" >
                            <option value=""></option>
                            
                        </select>
                        <label for="" >Qty:</label>
                        <input type="number" name="qty" id="qty"  value="1">
                        <button type="button" name="add_elemnt" id="add_elemnt" class="add-btn">Ajouter</button>
                        <button type="button" name="valider" id="valider">Calculer</button>
                        <div>
                            <table class="table table-striped" name="pdp_products" id="pdp_products">
                                <thead>
                                    <tr>
                                        <th width="200">Article</th>
                                        <th width="50">Nomenclature</th>
                                        <th width="30">Qté</th>
                                    </tr>
                                    
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                    </div>
                </td>
                <td padding: 10px;>
                    <div>
                        <h1>BESOINS</h1>
                        <table name="bom_lines" id="bom_lines" class="table table-striped" >
                            <thead>
                                <th>Code</th>
                                <th>Qty</th>
                            </thead>
                            <tbody>
                                
                            </tbody>
                        </table>
                    </div>
                    
                </td>
            </tr>
        </table>-->
        

<script>

    
    var pdp_lines = [];
    
    $(document).ready(function() {
       
       $('#valider').click(function() {
        pdp_lines.splice(0, pdp_lines.length);
        $('#pdp_products tbody tr').each(function() {
            
            var select = $(this).find('.bom'); // Trouver le <select> dans la ligne
            var id_bom = select.val();
            var input = $(this).find('.pdp_qty'); // Trouver l'input dans la ligne
            var qty = input.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);
                    }
                });
       });
   });


    
</script>
{% endblock %}