{% extends 'base.html' %}
{% block content %}
<h1 class="text-center display">Semulateur</h1>
<div>
    <form action="">
        {% csrf_token %}
        <label for="">Article</label>
        <input type="hidden" id="js_value" name="js_value" value="">
        <br>
        <select name="art" id="art" >
            <option value=""></option>
            {% for produit in products %}
            <option value="{{produit.id}}">[{{produit.code}}] {{produit.name}}</option>
            {% endfor %}
        </select>
        <br>
        <label for="">Nomenclatures</label>
        <br>
        <p id="output"></p>


        <br>
        <select name="nomenclature" id="nomenclature">
            <option value=""></option>
            {% for bom in boms %}
            
            <option value="{{bom.id}}" selected="0">{{bom.code}}</option>
            
            {% endfor %}
        </select>
        <br>
        <p>x = {{selectedValue}}</p>
        <input type="number" name="qty" id="qty">
        
        <button type="submit">Valider</button>
    </form>

</div>

<script>
    // Step 2: JavaScript to handle the change event
    document.getElementById('art').addEventListener('change', function() {
        // Get the selected value
        var selectedValue = this.value;
        
        
        // Display the selected value in the output paragraph
        document.getElementById('output').innerText = selectedValue;
    });

    

</script>





{% endblock %}