{# -*- mode: jinja-html -*- #}
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block styles %}
{{super()}}
<link type="text/css" rel="stylesheet" href="/ScoDoc/static/css/autosuggest_inquisitor.css" />
<script src="/ScoDoc/static/libjs/AutoSuggest.js"></script>
{% endblock %}

{% block app_content %}
    <h1>Envoyer une offre</h1>
    <br>
    <div class="row">
        <div class="col-md-4">
            <p>
                (*) champs requis
            </p>
            <form method="POST" action="" novalidate>
                {{ form.hidden_tag() }}
                {{ form.responsables.label }}
                {% for error in form.responsables.errors %}
                    <p class="help-block form-error">{{ error }}</p>
                {% endfor %}
                {{ form.responsables }}
                <div style="margin-bottom: 10px;">
                    <button class="btn btn-default" id="add-responsable-field">Ajouter un responsable</button>
                    {{ form.submit(class_="btn btn-default") }}
                    {{ form.cancel(class_="btn btn-default") }}
                </div>
            </form>
        </div>
    </div>
    
    <script>
        let allResponsablesFieldWrapper = document.getElementById('responsables');
        let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('li');
        for(let i = 0; i < allResponsablesField.length; i++) {
            let form_id = allResponsablesField[i].getElementsByTagName('input')[0].id
            if(form_id.split('-')[1] != 0)
                allResponsablesField[i].insertAdjacentHTML('beforeend', `<div class="btn btn-default btn-remove" onclick="deleteForm('${form_id}')">Retirer</div>`)
        }

        window.onload = function(e) {
            var responsables_options = {
                script: "/ScoDoc/entreprises/responsables?",
                varname: "term",
                json: true,
                noresults: "Valeur invalide !",
                minchars: 2,
                timeout: 60000
            };

            let allResponsablesFieldWrapper = document.getElementById('responsables');
            let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('input');
            for(let i = 0; i < allResponsablesField.length; i++) {
                new bsn.AutoSuggest(allResponsablesField[i].id, responsables_options);
            }

            let addResponsableFieldBtn = document.getElementById('add-responsable-field');
            addResponsableFieldBtn.addEventListener('click', function(e){
                e.preventDefault();
                let allResponsablesFieldWrapper = document.getElementById('responsables');
                let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('input');
                let responsableInputIds = []
                for(let i = 0; i < allResponsablesField.length; i++) {
                    responsableInputIds.push(parseInt(allResponsablesField[i].name.split('-')[1]));
                }
                let newFieldName = `responsables-${Math.max(...responsableInputIds) + 1}`;
                allResponsablesFieldWrapper.insertAdjacentHTML('beforeend',`
                <li>
                    <label for="${newFieldName}">Responsable (*)</label>
                    <input class="form-control" id="${newFieldName}" name="${newFieldName}" type="text" value="" placeholder="Tapez le nom du responsable de formation">
                    <div class="btn btn-default btn-remove" onclick="deleteForm('${newFieldName}')">Retirer</div>
                </li> 
                `);
                var as_r = new bsn.AutoSuggest(newFieldName, responsables_options);
            });
        }

        function deleteForm(x) {
            var li_form = document.querySelector(`label[for=${x}]`).closest('li');
            if (li_form) {
                li_form.remove()
            }
        }
    </script>
{% endblock %}