{% do setAriane(1, 'Créer un litige' | trad) %}

{% extends 'layout.twig' %}
{% block body %}

<section class="contenu">
    <h1>{{ strBuild(
        'Création d’un litige pour la facture N°@1@' | trad,
        [numFact]
    ) }}</h1>

    {{ ariane() }}

    <form method="post" name="form_creer_litige" id="form_creer_litige" 
        class="box-form form-default"
        action="{{ path('GlobalApplication.Incidents.litigeCreate', {numFact: numFact}) }}"
        onsubmit="return ajaxSubmit(event);"
        data-onsuccess="followLink"
    >
        <div class="clearfix">
            <div class="row">
                {{ inputAdvance('SELECT', {
                    titre: 'Type de litige' | trad,
                    name: 'typeLitige',
                    listeValue: choixIncident,
                    obligatoire: true,
                    optionVide: true,
                }) }}
            </div>
            <div class="row">
                {{ inputAdvance('TEXTAREA', {
                    titre: 'Commentaire' | trad,
                    name: 'comment',
                    pathValidator: path('Ajax.validator.isStringAvecEspace'),
                    paramsValidator: {sizeMax: 3000},
                }) }}
            </div>
            <div class="row">
                {{ inputAdvance('ZOOM', {
                    titre: 'Contacts fournisseur' | trad,
                    name: 'ListContactFournisseur',
                    pahtZoom: path('Ajax.liste.contactFournisseurV2'),
                    titleZoom: 'Liste des contacts fournisseur' | trad,
                    paramZoom: {CODE_FOU: facture.CODE_FOUR, email: 'true'},
                }) }}
            </div>
            <div class="row">
                <div id="resp_litige" class="row">
                    {{ inputAdvance('ZOOMADVANCE', {
                        titre : 'Responsable litige' | trad,
                        name : 'INCF_USER',
                        pahtZoom : path('Ajax.liste.utilisateur'),
                        paramZoom : {litige_user_type : 'demandeur', litige : 'true', numFact: numFact},
                        entity : 'Hastutil',
                        titleZoom : 'Liste des utilisateurs' | trad,
                        pathConvert : path('Ajax.outil.convertLibelle'),
                        convertLibelle : 'convertLibelleGlobal',
                        pathValidator : path('Ajax.validator.zoom'),
                        paramsValidator : "{'entity' : 'Hastutil','nomChamp' : 'Responsable litige', 'null' : false}",
                        obligatoire : true,
                        value : incident.INCF_USER
                    }) }}
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="button secondaire button_right" onclick="window.action.arianePop();">
                {{- 'Annuler' | trad -}}
            </button>
            <button type="submit" class="button principal">{{ 'Valider' | trad }}</button>
        </div>
    </form>
</section>
<script>
var mapCommentMandatory = {{ mapCommentMandatory | json }};
var inputReason = document.querySelector('[name="typeLitige"]');
inputCommentLabel = 
    document.querySelector('[name="comment"]')
    .closest('.input-wrapper')
    .querySelector('[data-labelsuffix]');
inputCommentLabel.classList.add('obligatoire');

// Update 'comment' label mandatory 
inputReason.addEventListener('change', () => {
    inputCommentLabel.textContent = 
        mapCommentMandatory[ inputReason.value ] ? '*' : '';
})
</script>
{% endblock %}