{% block body %}

	<div class="contenu clearfix" id="new_association">
		<form method="post" name="form_new_association" id="form_new_association" class="box-form clearfix">
            <h3>
                {{ elementValue ? 'Modifier un élément associé' | trad : 'Ajouter un élément d\'association' | trad }}
            </h3>
            <div class="full clearfix">
                <div class="row single">
                    {{ inputAdvance('SELECT', {
                        'titre'             : 'Sélectionnez un type d\'association' | trad ~ ' :',
                        'name'              : 'type',
                        'listeValue'        : associationTypes,
                        'value'             : chosenType ? chosenType : elementType,
                        'optionVide'        : true,
                        'myFunc'            : selectItems,
                        'obligatoire'       : true,
                        'option'            : chosenType ? 'readOnly' : '',
                    }) }}
                </div>
            </div>
            <div class="full clearfix" id="input">
				{% if arrayZoom %}
					{% include '@Evaluation/Association/input' %}
				{% endif %}
            </div>
            {% if chosenCompany or sectorized %}
                <div class="row single">
                    {{ inputAdvance('ZOOM', {
                        'titre'             : 'Sélectionnez une société' | trad ~ ' :',
                        'name'              : 'company',
                        'pahtZoom'          : sectorized ? companyParameters.pathZoom : '',
                        'paramZoom'         : sectorized ? companyParameters.paramZoom : '',
                        'titleZoom'         : sectorized ? companyParameters.titleZoom : '',
                        'value'             : chosenCompany ? chosenCompany : company,
                        'obligatoire'       : true,
                        'pathValidator'     : companyParameters.pathValidator,
                        'paramsValidator'   : companyParameters.paramValidator,
                        'option'            : chosenCompany ? 'readOnly' : 'desactiveSaisie'
                    }) }}
                </div>
            {% endif %}	
            {% if chosenElement or chosenType %}
                <div id="element_input" class="row single" {% if companyInput or sectorized %} style="display:none;" {% endif %}>
                    {{ inputAdvance('ZOOM', {
                        'titre'             : zoomParameters.titleZoom ~ ' :',
                        'name'              : 'element',
                        'pahtZoom'          : zoomParameters.pathZoom,
                        'paramZoom'         : "{'CODE_STE' : $('#input_company').val()}",
                        'titleZoom'         : zoomParameters.titleZoom,
                        'obligatoire'       : true,
                        'value'             : chosenElement ? chosenElement : valueInputGenerate,
                        'pathValidator'     : zoomParameters.pathValidator,
                        'paramsValidator'   : zoomParameters.paramValidator,
                        'option'            : 'desactiveSaisie'
                    }) }}
                </div>            
            {% endif %}
            <div class="button_right full validation_modal">
                <a class="button secondaire" href="{{ path('Evaluation.Association.index', {id: id, mode: mode}) }}">{{'Annuler' | trad}}</a>
            {% if chosenElement and chosenCompany %}
                    <button type="button" id="test" class="button principal button_right" onClick="sendElement('{{ path('Evaluation.Association.ajaxValidation', {mode: mode, id: id, type: chosenType, company: chosenCompany, value: chosenElement }) }}');">{{'Valider' | trad}}</button>
            {% elseif sectorized %}
                    <button type="button" id="test" class="button principal button_right" onClick="sendElement('{{ path('Evaluation.Association.ajaxValidation', {mode: mode, id: id, type: chosenType, company: company, value: chosenElement }) }}');">{{'Valider' | trad}}</button>
            {% elseif chosenElement %}
                    <button type="button" id="test" class="button principal button_right" onClick="sendElement('{{ path('Evaluation.Association.ajaxValidation', {mode: mode, id: id, type: chosenType, value: chosenElement }) }}');">{{'Valider' | trad}}</button>
            {% else %}
                    <button type="button" id="test" class="button principal button_right" onClick="sendElement('{{ path('Evaluation.Association.ajaxValidation', {mode: mode, id: id, type: chosenType, value: chosenElement }) }}');">{{'Valider' | trad}}</button>
            {% endif %}
            </div>
		</form>
	</div>
    <script>
        $('#input_type').change(function(){
            let type = $(this).val();

            $.ajax({
                dataType : 'html',
                url: '{{ path('Evaluation.Association.input', {mode: mode, id: id}) }}',
                data: {'type' : type},
                type: "POST",
                success: function(result){
                    $('#input').html(result);
                }
            });
        });

        $('#input_company').change(function(){
            if ($(this).val()) {
                $('#element_input').show();
            } else {
                $('#element_input').hide();
                $('#element_input').val('');
            }
        });

		function sendElement(path)
		{
			activeLoader();
            $.ajax({
                dataType : 'html',
                url: path,
                type: "POST",
                data: $('#form_new_association').serialize(),
                success: function(result){
                    let data = jQuery.parseJSON(result);
                    
                    if (data.statut == 'O') {
						redirectJSWithPost(data.path, data.post);
                    } else {
                        desactiveLoader();
                        $("#modal-content").addClass("modal_small");
                        $("#modal-body").html(data.content);
                        activePopup();
                    }
                }
            });		
		}
    </script>
{% endblock %}
