{{ form_start(form) }}

<div class="d-flex">
    <div>
        {{ form_widget(form) }}

        {% if edit is not defined %}
            <input type="hidden" name="serial_number[composant]" id="serial_number_composant">

            <div class="d-flex my-3">
                <button class="btn btn-info my-3"  type="button" data-bs-toggle="modal" data-bs-target="#searchModal">

                    <img src="{{ asset('img/magnify.svg') }}" alt="" width="30">

                    <span>Rechercher un composant</span>

                </button>
                <div class="mx-3">
                    <label for="quantite">Quantité</label>
                    <input type="number" name="quantite" id="quantite" class="form-control" min="0" value="0">

                </div>
            </div>

                <div id="data"></div>
        {% endif %}




        <button class="btn btn-success my-3">{{ button_label|default('Créer') }}</button>
    </div>
    <div class="mx-5">
        <h5>Numéro de série</h5>
        <div id="sn_list" class="p-4"></div>
    </div>
</div>

{{ form_end(form) }}

{% include 'CRUD/composant/searchModal.html.twig' with {selectable : 'serial_number_composant'} %}

<script>
    let tmp = '{{ path('composant_show',{id:0}) }}';

    let input  = document.getElementById('serial_number_composant');
    input.addEventListener('change',(e) => {
        let array = tmp.split('/');
        array.pop();
        tmp = array.join('/')+ '/'+ input.value;

        $.ajax({

            method: "get",

            url: tmp,

            data: {

            },

            success: function (data) {

                $('#data').html(data)


            }

        });
    });


    let quantite = document.getElementById('quantite');
    let snList = document.getElementById('sn_list');
    quantite.addEventListener('input', ()=>{
        let length  = snList.children.length;

        if (length > quantite.value){
            let diff = length - quantite.value;
            console.log(diff);
            for (let i = 0; i < diff ; i++) {
                snList.children[length - i - 1].remove();
            }

        }else{
            let diff =   quantite.value - length;

            for (let i = 0; i < diff ; i++) {
                snList.innerHTML += '<input type="text" name="sn_'+snList.children.length+'" class="form-control m-3">';

            }
        }



    });

</script>