{% extends 'admin/base.html.twig' %}

{% block title %}AFC E-Learning{% endblock %}
{% form_theme form 'admin/training_qcm/_collection.html.twig' %}

{% block body %}
    <div class="container-fluid bg-white p-5 mb-5">
        {{ form_start(form) }}
        {{ form_widget(form) }}
        
        <input type="submit" class="secondary-btn" value="Enregistrer les modifications">
        {{ form_end(form) }}
    </div>
{% endblock %}

{% block javascripts %}
    <script>

    let addAnswer = document.getElementById('add_answer');

    addAnswer.addEventListener('click', function(){

        const index = +$('#widgets-counter').val();
        //let index = $('#training_qcm_answers div.form-group').length;
        console.log(index);

        const template = $('#training_qcm_answers').data('prototype').replace(/__name__/g, index);
        console.log(template);

        $('#widgets-counter').val(index + 1);
        $('#training_qcm_answers').append(template);

        handleDeleteButtons();

    })

    function handleDeleteButtons()
    {
        $('button[data-action="delete"]').click(function(){
            const target = this.dataset.target;
           // index = index - 1;
            console.log(target);
            $(target).remove();
        })
    }

    function updateCounter ()
    {
        const count = $('#training_qcm_answers div.form-group').length; 
        $('#widgets-counter').val(count);
    }

    updateCounter();
    handleDeleteButtons();

    </script>
{% endblock %}