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

{% block title %}AFC E-Learning{% endblock %}

{% form_theme form 'admin/training_stages/_collection.html.twig' %}

{% block body %}
<div class="container-fluid p-5">
    <h2 class="text-secondary mb-4">
    {% if ts.funder != null %} Modifier {% else %} Définir {% endif %}
    le financeur de la formation <span class="text-dark">{{ ts.trainingTitle }}</span> du stagiaire <span class="text-dark">{{ ts.learner.lastname }} {{ ts.learner.firstname }}</span>
    </h2>
    <div class="bg-white p-3">
        {{ form_start(form) }}
        <div class="row mb-4">
            <div class="col-lg-4">
                <label for="">Séléctionner une entreprise</label>
                <select name="" class="form-control" id="company-select"></select>
                {{ form_widget(form.company) }}
            </div>
            <div class="col-lg-4">
                <label for="">Séléctionner un référent</label>
                <select name="" class="form-control" id="referent-select"></select>
                {{ form_widget(form.companyReferent) }}
            </div>
        </div>
        <input type="submit" class="secondary-btn" value="{% if ts.funder != null %} Modifer {% else %} Enregistrer {% endif %} le financeur">
        {{ form_end(form) }}
    </div>
</div>
<input type="hidden" id="jsonComp" value="{{ jsonCompanies }}">
<input type="hidden" id="jsonRef" name="" value="{{ jsonReferents }}">
{% endblock %}

{% block javascripts %}
<script>
    let hiddenCompanySelect = document.getElementById('training_funder_company');
    let hiddenReferentSelect = document.getElementById('training_funder_companyReferent');
    let companySelect = document.getElementById('company-select');
    let referentSelect = document.getElementById('referent-select');
   
    const dataCompany = getJsonCompany();
    const dataReferent = getJsonReferent();

    hydrateSelectFunder(dataCompany, companySelect);
    hydrateSelectFunder(dataReferent[0], referentSelect);
    setHiddenInputs();

    companySelect.addEventListener('change', function() {
            let idx = setCurrCompanyOptions ();
            cleanReferentSelect ();
            hydrateSelectFunder(dataReferent[idx], referentSelect);
            setHiddenInputs();
    })

    referentSelect.addEventListener('change', function() {
        setHiddenInputs();
    })

    function getJsonCompany ()
    {
        return JSON.parse(document.getElementById('jsonComp').value);
    }

    function getJsonReferent ()
    {
        let = refJson = JSON.parse(document.getElementById('jsonRef').value);
        for ( let i = 0; i < refJson.length; i++ )
            for ( let j = 0; j < refJson[i].length; j++ )
                refJson[i][j] = JSON.parse(refJson[i][j]);
        return refJson;
    }

    /**
    * @param Json data
    * @param HTMLElement select
    */
    function hydrateSelectFunder( data, select )
    {
        for (let i = 0; i < data.length; i++) {
            let el = document.createElement('option');
                el.textContent = data[i].name;
                el.setAttribute("value", data[i].id);
                el.setAttribute("data-idx", i);
                select.append(el);
        }
    }

    function setHiddenInputs()
    {
        hiddenCompanySelect.value = companySelect.value;
        hiddenReferentSelect.value = referentSelect.value;
    }

    function setCurrCompanyOptions ()
    {
        return companySelect.selectedOptions[0].dataset.idx;
    }

    function cleanReferentSelect ()
    {
        while (referentSelect.firstChild) {
            referentSelect.removeChild(referentSelect.firstChild);
        }
    }
</script>
{% endblock %}