<style>
.deleteBtn {
    border: none;
    background: none;
}
</style>
<div class="contenu clearfix" id="createDiv">
	<form   class="tab-content" 
            method="post" 
            name="formCreate" 
            id="formCreate" 
            data-path-submit="{{ update ? path("Specifique112.ParamSIContratFournisseur.update", {codeFrs, contractNumber, codeSI}) : path("Specifique112.ParamSIContratFournisseur.create") }}"
            data-path-back="{{ path("Specifique112.ParamSIContratFournisseur.read") }}"
        >
		<div class="clearfix single">
			<fieldset class="scheduler-border m-0" id="fieldsetCreation">
				<legend class="scheduler-border">
                    <div class="flex justify-between items-center">
                        <span>{{ 'Création' | trad }}</span>
                        {% if update is not defined %}
                            <button type="button" class="secondaire button" id="addNewLine">{{"Ajouter une ligne" | trad}}</button>
                        {% endif %}
                    </div>
                </legend>
			</fieldset>
            <div class="flex justify-end my-base">
                <button type="submit" class="principal button">{{"Enregistrer" | trad}}</button>
            </div>
		</div>
        {% if update %}
            <input type="hidden" name="oldCodeFrs" id="oldCodeFrs" value="{{codeFrs}}">
            <input type="hidden" name="oldContractNumber" id="oldCodeFrs" value="{{contractNumber}}">
            <input type="hidden" name="oldCodeSI" id="oldCodeFrs" value="{{codeSI}}">
        {% endif %}
	</form>

    <template id="templateLine">
        <div class="flex classToCount">
            <div class="row" style="width: 95%">
                <div class="colonne3">
                    {{ inputAdvance('ZOOMADVANCE', {
                            'titre' : 'Fournisseur' | trad,
                            'name' : 'CODE_FRS[@NUMBER@]',
                            'pahtZoom' : path('Ajax.liste.fournisseur'),
                            'paramZoom' : "{'filter_egal_PROSPECT' : 'F' }",
                            'entity' : 'Fourniss',
                            'titleZoom' : 'Liste des fournisseurs' | trad,
                            'pathConvert' : path('Ajax.outil.convertLibelle'),
                            'convertLibelle' : 'convertLibelleGlobal',
                            'pathValidator' : path('Ajax.validator.zoom'),
                            'paramsValidator' : "{'entity' : 'Fourniss', 'nomChamp' : '"~ 'Fournisseurs' | trad ~"'}",
                            'obligatoire' : true,
                            'value': update ? codeFrs : ''
                        }) }}
                </div>
                <div class="colonne3">
                    {{ inputAdvance('TEXT', {
                        'titre' : 'Numéro de contrat' | trad,
                        'name' : 'CONTRACT_NUMBER[@NUMBER@]',
                        'value': update ? contractNumber : ''
                    }) }}
                </div>
                <div class="colonne3 last">
                        {{ inputAdvance('ZOOMADVANCE', {
                            'titre' : 'Section d\'imputation' | trad,
                            'name' : 'SECT_IMP[@NUMBER@]',
                            'pahtZoom' : path('Ajax.liste.si'),
                            'paramZoom' : "{'si_valide': 'on'}",
                            'entity' : 'Sectimpu',
                            'titleZoom' : 'Liste des sections d\'imputation' | trad,
                            'pathConvert' : path('Ajax.outil.convertLibelle'),
                            'convertLibelle' : 'convertLibelleGlobal',
                            'pathValidator' : path('Ajax.validator.sectionImputation'),
                            'paramsValidator' : "{'nomChamp' : '"~ 'Section d\'imputation' | trad |e('js')|raw ~"', 'null' : true }",
                            'addCss' : 'flex-grow',
                            'value': update ? codeSI : ''
                        }) }}	
                </div>
            </div>
            {# <div class="flex justify-start items-start">
                <button type="button" class="deleteBtn"><img src="/oxaproc//IconeV2/Misc/bloquant.png"></button>
            </div> #}
        </div>
    </template>

    {% if update is not defined %}
    <script>
        function loadNewLine() {
            const addNewLine = document.querySelector('#addNewLine');
            const fieldset = document.querySelector('#fieldsetCreation');

            addNewLine.addEventListener('click', () => {
                template = document.querySelector('#templateLine').innerHTML;
                template = template.replaceAll(
                    '@NUMBER@', 
                    document.querySelectorAll('#fieldsetCreation > div.classToCount').length
                );
                fieldset.insertAdjacentHTML('beforeend', template);
            });
        }

        loadNewLine();
    </script>
    {% endif %}

    <script>
        function load() {
            const fieldset = document.querySelector('#fieldsetCreation');
            let template = document.querySelector('#templateLine').innerHTML;

            template = template.replaceAll(
                '@NUMBER@', 
                document.querySelectorAll('#fieldsetCreation > div.classToCount').length
            );

            fieldset.insertAdjacentHTML('beforeend', template);

            document.getElementById('formCreate').addEventListener('submit', (e) => {
                e.preventDefault();
                activeLoader();

                const formData = new FormData(document.getElementById('formCreate'));

                $.ajax({
                    url: e.currentTarget.dataset.pathSubmit,
                    type: 'POST',
                    data: formData,
                    processData: false, 
                    contentType: false,
                    success: function() {
                        redirectJSWithPost(document.getElementById('formCreate').dataset.pathBack);
                    }
                });
            });
        }

        load();
    </script>
</div>
