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

{% block app_content %}
<h1>Ajout entreprise</h1>
<br>
<div class="row">
    <div class="col-md-4">
        <p>
            Les champs s'auto complète selon le SIRET<br>
            (*) champs requis
        </p>
        {{ wtf.quick_form(form, novalidate=True) }}
    </div>
</div>

<script>
    {# ajout margin - bottom sur le champ pays #}
    var champ_pays = document.getElementById("pays")
    if (champ_pays !== null) {
        var closest_form_group = champ_pays.closest(".form-group")
        closest_form_group.style.marginBottom = "50px"
    }

    document.getElementById("siret").addEventListener("keyup", autocomplete);

    function autocomplete() {
        var input = document.getElementById("siret").value.replaceAll(" ", "")
        if (input.length >= 14) {
            fetch("https://entreprise.data.gouv.fr/api/sirene/v1/siret/" + input)
                .then(response => {
                    if (response.ok)
                        return response.json()
                    else {
                        emptyForm()
                    }
                })
                .then(response => fillForm(response))
                .catch(err => err)
        }
    }

    function fillForm(response) {
        document.getElementById("nom_entreprise").value = response.etablissement.l1_normalisee
        document.getElementById("adresse").value = response.etablissement.l4_normalisee
        document.getElementById("codepostal").value = response.etablissement.code_postal
        document.getElementById("ville").value = response.etablissement.libelle_commune
    }

    function emptyForm() {
        document.getElementById("nom_entreprise").value = ''
        document.getElementById("adresse").value = ''
        document.getElementById("codepostal").value = ''
        document.getElementById("ville").value = ''
    }
</script>
{% endblock %}