{# ###### CONFIGURE QUESTION STEP ###### #}
<div class="box-body">
    <div id="referenceInformationBlock" class="row">
        <div class="col-sm-8 col-md-8 col-lg-8" style="margin-right: -2%;">
            <span>Type</span>
            <div class="containerTypeStep">
                <div>
                    <input type="radio" id="typeStepQuestion" name="typeStep" value="question"
                           onchange="displayByTypeStep(this.id)">
                    <label for="typeStepQuestion">Question</label>
                </div>
                <div>
                    <input type="radio" id="typeStepInformation" name="typeStep" value="information"
                           onchange="displayByTypeStep(this.id)">
                    <label for="typeStepInformation">Informative</label>
                </div>
                <div>
                    <input type="radio" id="typeStepStartTag" name="typeStep" value="start-tag"
                           onchange="displayByTypeStep(this.id)">
                    <label for="typeStepStartTag">Tag de début</label>
                </div>
                <div>
                    <input type="radio" id="typeStepEndTag" name="typeStep" value="end-tag"
                           onchange="displayByTypeStep(this.id)">
                    <label for="typeStepEndTag">Tag de fin</label>
                </div>
            </div>

        </div>
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="col-sm-6 col-md-6 col-lg-6">
                <label for="reference" class="control-label">Référence de l'étape<span
                        class="asterix">*</span></label>
                <input readonly type="text" id="reference" name="reference" class="form-control">
                <span id="refNotUniqSpan" class="errorMessage" style="display: none">
                    La référence doit être unique
                </span>
                    <span id="referenceRequired" class="errorMessageFormProduct" style="display: none">
                    Le champ est obligatoire
                </span>
            </div>
            <span>
                <i><small>La référence de l'étape est l'identifiant unique de la
                        question. Elle permet de passer d'étape en étape (question en question)</small></i>
            </span>
        </div>
    </div>
    <br>
    <div id="serviceDataInformationBlock" class="row">
        <div class="col-sm-4 col-md-4 col-lg-4" style="margin-right: -2%;">
            <label for="serviceDataKey" class="control-label">Clé technique pour le service
                data</label>
            <input type="text" id="serviceDataKey" name="serviceDataKey" class="form-control">
            <span id="serviceDataKeyNoWhiteSpace" class="errorMessage" style="display: none">
                Les espaces ne sont pas autorisés
            </span>
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8" style="margin-top: 20px;">
            <i><small>Cette clé permet d'identifier la réponse donnée à cette étape, permettant de l'utiliser
                    dans les
                    conditions (questions cachées/post traitements)</small></i>
        </div>
    </div>
    <hr style="margin: 2% 0;">
    <div id="baseInformationBlock">
        <div class="row">
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;">
                <label for="label" class="control-label">Libellé<span class="asterix">*</span></label>
                <input required type="text" id="label" name="label" class="form-control">
                <span id="labelRequired" class="errorMessageFormProduct" style="display: none">
                        Le champ est obligatoire
                    </span>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;">
                <label for="shortLabel" class="control-label">Libellé court<span
                            class="asterix">*</span></label>
                <input required type="text" id="shortLabel" name="shortLabel" class="form-control">
                <span id="shortLabelRequired" class="errorMessageFormProduct" style="display: none">
                        Le champ est obligatoire
                    </span>
            </div>
        </div>
        {# ################### #}
        <div class="row" style="margin-top: 1%;">
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;">
                <label for="helpLabel" class="control-label">Libellé d'aide</label>
                <input type="text" id="helpLabel" name="helpLabel" class="form-control">
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;">
                <label for="actionAdmitted" class="control-label">Réponse admises<span class="asterix">*</span></label>
                <select required id="actionAdmitted">
                    <option value="null">-- Sélectionnez votre choix --</option>
                    <option value="text">Texte</option>
                    <option value="unique">Réponse unique</option>
                    <option value="multiple">Réponse multiple</option>
                </select>
                <span id="actionAdmittedRequired" class="errorMessageFormProduct" style="display: none">
                        Le champ est obligatoire
                    </span>
            </div>
        </div>
        {# ################### #}
        <br>
        <div id="nextStepRefForMultiTextRow" class="row" style="display: none">
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 7px;padding-right: 0;">
                <i><small>Cette référence sera utilisée comme identifiant pour
                        basculer vers la question suivante quel que soit les réponses cochées ou
                        renseignées</small></i>
            </div>
            <div class="col-sm-5 col-md-5 col-lg-5" style="margin-left: 0;padding-left: 0;">
                <label for="nextStepReferenceForMultiText" class="control-label">
                    Référence de la prochaine étape<span class="asterix">*</span>
                </label>
                <select required id="nextStepReferenceForMultiText" name="nextStepReferenceForMultiText"
                        class="form-control">
                    <option value="null">-- Sélectionnez votre choix --</option>
                </select>
                <span id="nextStepReferenceForMultiTextRequired" class="errorMessageFormProduct"
                      style="display: none">
                    Le champ est obligatoire
                </span>
            </div>
            <div class="col-sm-1 col-md-1 col-lg-1" style="margin-top: 23px;margin-left: -2%;">
                <button title="Créer une nouvelle étape vide" id="addBlankStepBtnFromQuestion"
                        onclick="addNewBlankStep()" type="button" class="boutonAction">+
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;">
                <input type="checkbox" id="hasSubtitle" name="hasSubtitle"
                       style="transform: scale(1.2);cursor: pointer;">
                <label for="hasSubtitle" class="control-label control-checkbox-label"> Ajouter un sous titre
                </label>
            </div>
        </div>
        <div class="row" style="margin-bottom: 2%;margin-left: 0;display:none;width: 50%" id="subtitleRow">
            <label class="control-label" for="subtitle">
                Sous titre <span class="asterix">*</span>
            </label>
            <input required type="text" id="subtitle" name="subtitle" class="form-control">
            <span id="subtitleRequired" class="errorMessageFormProduct" style="display: none">
                        Le champ est obligatoire
            </span>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;">
                <input type="checkbox" id="isTechData" name="isTechData"
                       style="transform: scale(1.2);cursor: pointer;">
                <label for="isTechData" class="control-label control-checkbox-label"> Donnée technique partagée
                    (tech
                    data)
                </label>
            </div>
        </div>
        <div class="row" style="margin-bottom: 2%;margin-left: 0;display:none;width: 50%" id="techDataKeyRow">
            <label class="control-label" for="techDataKey">
                Clé technique à associer <span class="asterix">*</span>
            </label>
            <input required type="text" id="techDataKey" name="techDataKey" class="form-control">
            <span id="techDataKeyRequired" class="errorMessageFormProduct" style="display: none">
                        Le champ est obligatoire
            </span>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px">
                <input type="checkbox" id="isUnDisplay" name="isUnDisplay"
                       style="transform: scale(1.2);cursor: pointer;">
                <label for="isUnDisplay" class="control-label control-checkbox-label"> Question cachée ?
                </label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 5px;margin-bottom: 1%;">
                <input type="checkbox" id="backStepForbidden" name="backStepForbidden"
                       style="transform: scale(1.2);cursor: pointer;">
                <label for="backStepForbidden" class="control-label control-checkbox-label"> Retour arrière interdit ?
                </label>
            </div>
        </div>
        <div class="row" style="margin-bottom: 1%;margin-left: 0;display:none;width: 50%"
             id="conditionnalDisplayRow">
            <label class="control-label" for="conditionalDisplay">
                Condition à appliquer pour la redirection vers la prochaine étape <span class="asterix">*</span>
            </label><br>
            <textarea required id="conditionalDisplay" name="conditionalDisplay" rows="6" cols="89"
                      style="resize: none;"></textarea>
            <span id="conditionalDisplayRequired" class="errorMessageFormProduct"
                  style="float: left;display: none;margin-top: -6px;">
                   Le champ est obligatoire
                </span>
            <div class="row">
                <div class="col-sm-9 col-md-9 col-lg-9" style="margin-top: 10px;">
                    <label class="control-label" for="otherNextStepRef">
                        Autre réponse si les conditions de ne sont pas remplies
                    </label>
                    <input type="text" id="otherNextStepRef" name="otherNextStepRef" class="form-control">
                </div>
            </div>
        </div>
        {# ################### Lien FAQ #}
        <div class="row" style="padding:2%">
            <label>
                Référence FAQ :
                <br>
                <em>(id de la question)</em>
                <br>
                <input type="text" style="padding: .5rem" id="FAQQuestionId">
            </label>
        </div>
        {# ################### #}
        <div class="row" style="padding:2%">
            <label class="control-label">Ajouter une image</label>
            <div class="col-sm-12 col-md-12 col-lg-12" id="containerFileConfigService"
                 style="position: relative; width: 100%">
                <div class="col-sm-5 col-md-5 col-lg-5" style="height: 100px">
                    <span id="filepathValueLabelH5"
                          style="left: 15px;position: absolute;margin-top: 10%;">Aucun élement</span>
                </div>
                <div class="col-sm-2 col-md-2 col-lg-2" style="height: 100px;margin-top: 5px;">
                    <div id="filepathPreview" class="previewFileConfigService"></div>
                </div>
                <div class="col-sm-2 col-md-2 col-lg-2" style="height: 100px">
                    <div id="filepathFormAction" class="pull-left" style="display: none;margin-top:35%">
                        <a id="deleteFile" type="button" class="txtlibre txtUnderline"
                           style="cursor:pointer;padding-left: 10px;">
                            <span>Supprimer</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div style="display: flex; flex-direction: row;margin-top: 10px">
                    <label for="filepathImg" class="boutonAction" style="display: flex;align-items: center;">
                        Parcourir...
                    </label>
                    <small style="color: red;margin-top: 10px"><b>Veuillez selectionner un fichier de type PNG
                            ou
                            JPEG. La taille maximale autorisée est de 2Mo</b></small>
                </div>
                <div id="step_filepathImg">
                    <div class="form-group">
                        <input type="file" id="filepathImg" name="filepathImg"
                               class="project-input-btn form-control"
                               accept="image/png,image/jpeg">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-12">
            <button id="addBaseInfoSubmitBtn" type="button"
                    style="width:300px;display: block"
                    onclick="processSubmitButton('multiple');"
                    class="btn boutonAction float-right">{{ button_label|default("Valider et passer à l'étape suivante") }}</button>
        </div>
    </div>
</div>
<script src="{{ asset('install-bois/rule-engine/configureQuestion.js') ~ "?rnd=" ~ random() }}"></script>