{% extends 'base.html' %}
{% block content %}
<h1 class="text-center display">Besoin de production</h1>

        {% csrf_token %}
        <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 liste_products = [];
    var pdps = [];
    

    $(document).ready(function() {
        // Quand l'auteur est sélectionné
        $('#products').change(function() {
            var product_id = $(this).val();
            
            // Réinitialise les options du select des livres
            $('#boms').empty();
            
            if (product_id) {
                // Effectue une requête AJAX pour récupérer les livres
                $.ajax({
                    url: "{% url 'produits:get_boms' %}",
                    data: {
                        'product_id': product_id
                    },
                    success: function(data) {
                        // Ajoute chaque livre en option dans le select
                        $.each(data, function(index, bom) {
                            
                            $('#boms').append('<option value="' + bom.id + '">' + bom.code + '</option>');
                        });
                    }
                });
            }
        });
    });



    $(document).ready(function() {

        $('#boms').change(function() {
            var id = $(this).val();
            $('#bom_lines tbody').empty();
           
           
            if (id) {
                $.ajax({
                    url: "{% url 'produits:get_bom_qty' %}",
                    data: {
                        'id': id
                    },
                    success: function(data) {
                        // Ajoute chaque livre en option dans le select
                        $.each(data, function(index, bom) {
                          
                           $('#bom_qty').val(bom.product_qty);
                        });
                    }
                });
            }
         });


    });
        
        
            
   


    $(document).ready(function() {
       
        $('#valider').click(function() {
            $('#bom_lines tbody').empty();
            var tbody = $('#pdp_products tbody');
            if (liste_products.length== 0) 
            {
                //console.log("The tbody is empty.");
                alert("Vous devez séléctionner au moins un produit.");
            } 
            else 
            {
                //console.log("The tbody is not empty.");
                

                // AJAX request to send the list to Django
                $.ajax({
                    url: '/get_appros/',  // URL of the Django view
                    type: 'POST',
                    data: {
                        'my_list': JSON.stringify(liste_products),
                        'csrfmiddlewaretoken': '{{ csrf_token }}'  // CSRF token for security
                    },
                    success: function(data) {
                        // Handle success response from Django
                        //alert("Réponse du serveur : " + response.message);
                        $.each(data, function(index,x) {
                          
                          $('#bom_lines tbody').append(
                                '<tr>' +
                                        '<td>' + x.cmp_id + '</td>' +
                                        '<td>' + x.code + '</td>' +
                                        '<td>' + x.name + '</td>' +
                                        '<td>' + x.cmp_qty + '</td>' +
                                '</tr>'
                            )
                       });
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                        console.log("Erreur : " + error);
                    }
                });


            }
        });
    });

    $(document).ready(function() {
        // Quand l'auteur est sélectionné
      //  $('#get-data-btn').click(function() {});
        $('#valider1').click(function() {
           
            var bom_id = $('#boms').val();
            var numberValue = $('#qty').val();
            var bom_qty = $('#bom_qty').val();
            // Réinitialise les options du select des livres
            $('#bom_lines tbody').empty();
            
            if (bom_id) 
            {
                // Effectue une requête AJAX pour récupérer les livres
                $.ajax({
                    url: "{% url 'produits:get_bom_lines' %}",
                    data: {
                        'bom_id': bom_id
                    },
                    success: function(data) {
                        // Ajoute chaque livre en option dans le select
                        $.each(data, function(index, bom_lines) {
                           
                            $('#bom_lines tbody').append(
                                '<tr>' +
                                        '<td>' + bom_lines.product_id + '</td>' +
                                        '<td>' + bom_lines.product_qty + '</td>' +
                                        '<td>' + bom_lines.product_qty/bom_qty*numberValue + '</td>' +
                                '</tr>'
                                //'<option value="' + bom.id + '">' + bom.code + '</option>'
                                );
                        });
                    }
                });
            }
        });
    });

    $(document).ready(function() {
            $('#add_elemnt').click(function() {
                if(liste_products.length<1)
                {
                    $.ajax({
                    success: function() 
                    {
                        var prodcut = $('#products option:selected').text();
                        var bom = $('#boms option:selected').text();
                        var bom_qty = $('#bom_qty').val();
                        var qty = $('#qty').val();
                        var selectedValue = $('#products').val(); 
                        var bom_sel = $('#boms').val();
                        const pdp = {id:bom_sel, id_bom:bom , qty: qty };
                        if(prodcut=="")
                        {
                            alert('Vous devez sélectionner un produit');
                        }
                        else
                        {
                            var newRow = '<tr>' +
                                        '<td style="width: 200px;"> <input type="text"  name="pdp_prd" id="pdp_prd"  readonly value ="'+prodcut+'" > ' + '</td>' +
                                        '<td style="width: 150px;"> <input type="text"  readonly value ="'+bom+'" >' +  '</td>' +
                                        '<td style="width: 100px;"> <input type="text"  readonly value ="'+qty+'" >' + '</td>' +
                                        '<td><button class="delete-btn">Supprimer</button></td>'+
                                      '</tr>'
                        $('#pdp_products tbody').append(newRow);
                   
                        //console.log(pdp);
                        liste_products.push(pdp);
                     
                        $('#products').prop('selectedIndex', 0);  
                        $('#qty').val(1);
                        $('#boms').prop('selectedIndex', -1);
                        }
                    }
                    
                    });
                }
                else
                {
                    $.ajax({
                    success: function() 
                    {
                        var prodcut = $('#products option:selected').text();
                        var bom = $('#boms option:selected').text();
                        var bom_qty = $('#bom_qty').val();
                        var qty = $('#qty').val();
                        var selectedValue = $('#products').val();
                        var bom_sel = $('#boms').val();
                        const pdp = { id:bom_sel,id_bom:bom , qty: qty };
                        if(prodcut=="")
                        {
                            alert('Vous devez sélectionner un produit');
                            $('#qty').val(1);
                            $('#boms').prop('selectedIndex', -1);
                        }
                        else
                        {
                            var index = liste_products.findIndex(obj => obj.id_bom === bom);
                            
                            if(index<0)
                            {
                                var newRow = '<tr>' +
                                                '<td style="width: 200px;"> <input type="text"  name="pdp_prd" id="pdp_prd"  readonly value ="'+prodcut+'" > ' + '</td>' +
                                                '<td style="width: 150px;"> <input type="text"  readonly value ="'+bom+'" >' +  '</td>' +
                                                '<td style="width: 100px;"> <input type="text"  readonly value ="'+qty+'" >' + '</td>' +
                                                '<td style="width: 50px;"> <button class="delete-btn">Supprimer</button></td>'+
                                            '</tr>'
                                $('#pdp_products tbody').append(newRow);
                                liste_products.push(pdp);
                                
                                //console.log(pdp);
                                $('#products').prop('selectedIndex', 0);
                                $('#boms').prop('selectedIndex', -1);
                                $('#qty').val(1);
                            }
                            else
                            {
                                alert('Vous avez déja ajouter ce produit');
                                $('#products').prop('selectedIndex', 0);
                                $('#qty').val(1);
                                $('#boms').prop('selectedIndex', -1);
                            }
                        }
                    }
                    
                });
            }
                  
        });
        
        function afterRowAdded() {
                if (liste_products.length<1)
                    {   

                        liste_products.push("test");
                    }
                else
                    {
                        
                        //liste_products.append("test");
                        //alert('hhhhh');
                    }
            }

    });

    
    $('#pdp_products').on('click', '.delete-btn', function() {
        // Supprimer la ligne correspondante
        var bom = $(this).closest('tr').find('input[type="text"]').eq(1).val();
        var qty = $(this).closest('tr').find('input[type="text"]').last().val();
        const pdp = { id_bom:bom , qty: qty };
        //console.log(pdp);
        liste_products.splice(liste_products.findIndex(obj => obj.id_bom === bom),1);
        $(this).closest('tr').remove();
        $('#products').prop('selectedIndex', 0);
        $('#boms').prop('selectedIndex', -1);
        $('#qty').val(1);
        //alert('Ligne supprimée');
    });

    function initializeAutocomplete() {
            $('.product-input').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: '/get-product-suggestions/',  // L'URL de votre vue Django
                        dataType: 'json',
                        data: {
                            term: request.term  // Le terme tapé par l'utilisateur
                        },
                        success: function(data) {
                            response(data);  // Renvoie les suggestions
                        }
                    });
                },
                minLength: 2  // Minimum de caractères avant que les suggestions ne s'affichent
            });
        }

        $(document).ready(function() {
            $('.product-input').on('change', function() {
                // Récupérer la valeur du champ de texte
                var inputText = $(this).val().trim();
                console.log(inputText);


            });
        });
    
</script>
{% endblock %}