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

{% block styles %}
{{super()}}
{% endblock %}

{% block app_content %}
<h1>{{ title }}</h1>
<br>
<div class="row">
    <div class="col-md-4">
        <p>
            (*) champs requis
        </p>
        <form method="POST" action="" novalidate>
            {{ form.hidden_tag() }}
            {{ form.correspondants.label }}
            {% for subfield in form.correspondants %}
            {% if subfield.errors %}
            <p class="title-form-error">Formulaire {{ subfield.label.text }}</p>
            {% endif %}
            {% for subsubfield in subfield %}
            {% if subsubfield.errors %}
            {% for error in subsubfield.errors %}
            <p class="help-block form-error">{{ error }}</p>
            {% endfor %}
            {% endif %}
            {% endfor %}
            {% endfor %}
            {{ form.correspondants }}
            <div style="margin-bottom: 10px;">
                <button class="btn btn-default" id="add-correspondant-field">Ajouter un correspondant</button>
                {{ form.submit(class_="btn btn-default") }}
                {{ form.cancel(class_="btn btn-default") }}
            </div>
        </form>
    </div>
</div>

<script>
    let allCorrepondantsFieldWrapper = document.getElementById('correspondants');
    let allCorrepondantsForm = allCorrepondantsFieldWrapper.getElementsByTagName('li');
    for (let i = 0; i < allCorrepondantsForm.length; i++) {
        let form_id = allCorrepondantsForm[i].getElementsByTagName('table')[0].id
        if (form_id.split('-')[1] != 0)
            allCorrepondantsForm[i].insertAdjacentHTML('beforeend', `<div class="btn btn-default btn-remove" onclick="deleteForm('${form_id}')">Retirer ce correspondant</div>`)
    }

    window.onload = function (e) {
        let addCorrespondantFieldBtn = document.getElementById('add-correspondant-field');
        addCorrespondantFieldBtn.addEventListener('click', function (e) {
            e.preventDefault();
            let allCorrepondantsFieldWrapper = document.getElementById('correspondants');
            let allCorrepondantsField = allCorrepondantsFieldWrapper.getElementsByTagName('input');
            let correspondantInputIds = []
            let csrf_token = document.getElementById('csrf_token').value;
            for (let i = 0; i < allCorrepondantsField.length; i++) {
                correspondantInputIds.push(parseInt(allCorrepondantsField[i].name.split('-')[1]));
            }
            let newFieldName = `correspondants-${Math.max(...correspondantInputIds) + 1}`;
            allCorrepondantsFieldWrapper.insertAdjacentHTML('beforeend', `
                <li>
                    <label for="${newFieldName}">Correspondants-${Math.max(...correspondantInputIds) + 1}</label>
                    <table id="${newFieldName}">
                        <tr><th><label for="${newFieldName}-civilite">Civilité (*)</label></th><td><select class="form-control" id="${newFieldName}-civilite" name="${newFieldName}-civilite" required><option value="H">Monsieur</option><option value="F">Madame</option></select></td></tr>
                        <tr><th><label for="${newFieldName}-nom">Nom (*)</label></th><td><input class="form-control" id="${newFieldName}-nom" name="${newFieldName}-nom" required type="text" value=""></td></tr>
                        <tr><th><label for="${newFieldName}-prenom">Prénom (*)</label></th><td><input class="form-control" id="${newFieldName}-prenom" name="${newFieldName}-prenom" required type="text" value=""></td></tr>
                        <tr><th><label for="${newFieldName}-telephone">Téléphone (*)</label></th><td><input class="form-control" id="${newFieldName}-telephone" name="${newFieldName}-telephone" type="text" value=""></td></tr>
                        <tr><th><label for="${newFieldName}-mail">Mail (*)</label></th><td><input class="form-control" id="${newFieldName}-mail" name="${newFieldName}-mail" type="text" value=""></td></tr>
                        <tr><th><label for="${newFieldName}-poste">Poste</label></th><td><input class="form-control" id="${newFieldName}-poste" name="${newFieldName}-poste" type="text" value=""></td></tr>
                        <tr><th><label for="${newFieldName}-service">Service</label></th><td><input class="form-control" id="${newFieldName}-service" name="${newFieldName}-service" type="text" value=""></td></tr>
                        <tr><th><label for="${newFieldName}-origine">Origine</label></th><td><input class="form-control" id="${newFieldName}-origine" name="${newFieldName}-origine" type="text" value=""></td></tr>
                        <tr><th><label for="${newFieldName}-notes">Notes</label></th><td><input class="form-control" id="${newFieldName}-notes" name="${newFieldName}-notes" type="text" value=""></td></tr>
                    </table>
                    <input id="${newFieldName}-csrf_token" name="${newFieldName}-csrf_token" type="hidden" value=${csrf_token}>
                    <div class="btn btn-default btn-remove" onclick="deleteForm('${newFieldName}')">Retirer ce correspondant</div>
                </li>
                `);
        });
    }

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