{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as macro %}
{% import "forms-macro/inputs_form.html.twig" as input_form %}

{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block head %}
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset("externalCSS/toggle-switchy.css") }}" rel="stylesheet"/>
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('install-bois/rule-engine/mainRE.js') ~ "?rnd=" ~ random() }}"></script>
    <script type="text/javascript" src="{{ asset('externalJS/jquery-ui.min.js') }}"></script>
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Services | Gestion des services
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        {# Configurations principales du service #}
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top: 1%;">
                {# Choix du nom du service #}
                <div class="col-sm-4 col-md-4 col-lg-4">
                    {# ###### NAME BLOCK INFORMATION ###### #}
                    <div id="baseInfoBlock" class="rubriqueSansMT col-sm-12 col-md-12 col-lg-12"
                         style="padding-bottom: 0">
                        {% if service_re.logoFilepath != null %}
                            <img alt="Logo du service" id="logoService" class="logoServiceConfig"
                                 src="{{ asset(service_re.logoFilepath) }}">
                            <form method="post"
                                  action="{{ path('rule_engine_service_delete_logo', { "id" : service_re.id}) }}"
                                  enctype="multipart/form-data">
                                <button id="deleteLogoService" type="submit" class="close" data-dismiss="modal"
                                        aria-label="Close" style="float: left;margin-left: -4px;">
                                    <span aria-hidden="true">×</span></button>
                            </form>
                        {% endif %}
                        <h3>Nom du service <small style="font-size: small;">-
                                Version {{ service_re.version != null ? service_re.version : "1" }} - État du service
                                : {{ service_re.status != null ? service_re.statusName(service_re.status) : service_re.statusName("DRAFT") }}</small>
                        </h3>
                        <div class="form-group" style="padding-bottom:20px;margin-top: 2%;">
                            {{ form_row(form.label) }}
                            <button id="createServiceSubmitBtn" type="submit" style="display: none;"
                                    class="btn boutonAction float-right">{{ button_label|default('Étape suivante') }}</button>
                            <button id="updateServiceSubmitBtn" type="button" style="display: none;"
                                    class="btn boutonAction float-right">{{ button_label|default('Modifier') }}</button>
                        </div>

                    </div>
                </div>

                {# Actions sur le service #}
                <div class="col-sm-8 col-md-8 col-lg-8">
                    <div id="baseBtnBlock" class="rubriqueSansMT col-sm-12 col-md-12 col-lg-12" style="display:none;">
                        <div style="display: flex;align-items: center;">
                            <h3 style="margin-right: 40px;margin-top: 13px;">Actions sur le service</h3>
                            {# BOUTON METTRE EN PRODUCTION #}
                            <form style="display: contents;" id="applyServiceProductionForm"
                                  action="{{ path('rule_engine_service_apply_production') }}" method="post">
                                <input type="hidden" name="serviceReId" value="{{ service_re.id }}"/>
                                <button id="putInProdSubmitBtn" type="button" style="display: none;"
                                        class="btn boutonAction">{{ button_label|default('Mettre en production') }}</button>
                            </form>

                            {# BOUTON POUR TESTER LE SERVICE #}
                            {% if service_re.id %}
                                <a href="{{ path('rule_engine_front_start_test', {'id': service_re.id}) }}"
                                   target="_blank">
                                    <button
                                            {{ service_re.stepREs.count == 0 ? 'disabled="disabled"' : '' }}
                                            type="button"
                                            class="btn boutonAction">
                                        Tester le service ( {{ service_re.getNbTestServiceCreatedOnThisService }} )
                                    </button>
                                </a>
                            {% endif %}
                            <label id="canUpdatePrerequisite" class="toggle-switchy" for="switchPrerequisiteUpdated"
                                   data-color="#92D050" data-size="md" data-style="square">
                                <input {{ service_re.canPrerequisiteBeUpdated ? "checked='checked'" : "" }}"
                                type="checkbox" id="switchPrerequisiteUpdated"
                                onclick="changePrerequisiteUpdated($(this).is(':checked'))">
                                <span class="toggle">
                                  <span class="switch"></span>
                                </span>
                            </label>
                        </div>
                        <table id="baseBtnBlockTable" style="width: 100%; margin: 10px">
                            <tr>
                                <td style="text-align: left;">
                                    {# BOUTON POUR CHOISIR LE PRÉREQUIS #}
                                    {% if  prerequisites|length > 0 %}
                                        <label style="font-size:15px;color:black;" for="prerequisite_id">Prérequis:
                                            <span id="labelPrerequisite"></span>
                                        </label>
                                        <div style="display: flex;">
                                            <select id="prerequisite_id" style="width: 50%">
                                                <option value="null">-- Aucun --</option>
                                                {% for prerequisite in prerequisites %}
                                                    <option value="{{ prerequisite.id }}">{{ prerequisite.label }}</option>
                                                {% endfor %}
                                            </select>
                                            <button id="updatePrerequisiteBtn" type="button" class="btn boutonAction">
                                                Valider
                                            </button>
                                        </div>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: left;">
                                    {# BOUTON METTRE UN LOGO AU SERVICE #}
                                    {% if service_re.id != null %}
                                        <div style="margin: 2% 0 0 0;">
                                            <form id="importLogoService" novalidate method="post"
                                                  action="{{ path('rule_engine_service_import_logo', { "id" : service_re.id}) }}"
                                                  enctype="multipart/form-data">
                                                <label for="importServiceFile">Logo :
                                                    <span id="logoFilename" style="margin-left: 5px;font-weight: bold;">
                                                              {% if service_re.logoFilepath != null %}
                                                                  {{ service_re.logoFilepath|split("/")[service_re.logoFilepath|split("/")|length -1] }}
                                                              {% endif %}
                                                        </span>
                                                </label>
                                                <div style="display: flex;align-items: center;">
                                                    <input style="display:none;width: 100%;color: black;"
                                                           onchange="changeImportFileEvent()" name="file"
                                                           id="importServiceFile"
                                                           type="file" class="form-control-file">
                                                    <div style="display: flex;">
                                                        <button type="button"
                                                                style="display:block;width:120px; height:30px;"
                                                                onclick="document.getElementById('importServiceFile').click()">
                                                            Parcourir...
                                                        </button>
                                                    </div>
                                                    <small class="form-text text-muted" style="margin: 0 8px;">
                                                        {# <b>Format png ou svg autorisé - Taille 80px * 80px</b> #}
                                                        <b>Format png ou svg autorisé</b>
                                                    </small>
                                                    <button type="button" onclick="initImportLoader()"
                                                            class="mt-1 boutonAction">
                                                        Importer
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    {% endif %}
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {# Liste des étapes #}
        <div class="row" id="configurationListBlock" style="margin-top:1%;display: none">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div>
                    <div class="box-body">
                        <div class="rubriqueSansMT col-sm-12 col-md-12 col-lg-12">
                            <h3>Liste des étapes
                                <button id="addStepBtn" class="btn boutonAction pull-right">
                                    Ajouter une nouvelle étape
                                </button>
                            </h3>
                            <div id="summaryStepBlock"
                                 style="display:block;margin-top:1%;height: 200px;background-color:#f2f2f2;padding: 30px;text-align: center;"
                                 class="col-sm-12 col-md-12 col-lg-12">
                                <div class="box-body" style="margin: auto;">
                                    <div id="listStepDiv" style="margin-top: 4%;">
                                        <h4><b>Commencez à ajouter des étapes pour ce service</b></h4><br>
                                    </div>
                                    <hr id="anchorTitleHr" style="margin-top: 5%;border-top: 0">
                                </div>
                            </div>
                            <div id="summaryNotBlankStepBlock"
                                 style="display:none;margin-top: -1%;padding: 0;text-align: center;"
                                 class="col-sm-12 col-md-12 col-lg-12">
                                <div class="box-body" style="margin: auto;">
                                    <table id="listStepQuestionTable" style="width: 100%;margin-top: 2%;height: 209px;">
                                        <thead>
                                        </thead>
                                        <tbody style="height: 36px;">
                                        <tr id="liQ-0">
                                            <th>Référence</th>
                                            <th>Libellé</th>
                                            <th>Réponse admise</th>
                                            <th>Question caché</th>
                                            <th>Service data</th>
                                            <th>Tech data</th>
                                            <th>État</th>
                                            <th>Actions</th>
                                        </tr>
                                        </tbody>
                                        <tbody>
                                        {% for step in service_re.stepREs %}
                                            <tr id="liQ-{{ step.id }}">
                                                <td>{{ step.reference }}</td>
                                                <td style="padding:5px;">{{ step.label }}</td>
                                                <td>{{ step.actionAdmitted != null ? step.actionAdmitted|upper : "À renseigner" }}</td>
                                                <td>{{ step.isUnDisplay ? "OUI" : "NON" }}</td>
                                                <td>{{ step.serviceDataKey != null ? step.serviceDataKey : "NON" }}</td>
                                                <td>{{ step.isTechData ? step.techDataKey : "NON" }}</td>
                                                {% set backgroundColor = (step.statusName(step.status) == "Brouillon" ? "#C00000" : "#92D050") %}
                                                <td style="background-color: {{ backgroundColor }};color:white;">{{ step.status }}</td>
                                                <td>
                                                    <button onclick="get(getStepURI.replace('stepId', {{ step.id }})).then(response => initUpdateStepForm(response));"
                                                            type="button" class="btn boutonAction"
                                                            title="Modifier cette étape">
                                                        <img class="imgIconEdit">
                                                    </button>
                                                    <button onclick="initDeleteStepForm({{ step.id }});" type="button"
                                                            class="btn boutonRetour" name="btnDeleteBlock"
                                                            title="Supprimer cette étape">
                                                        <img class="imgIconDelete">
                                                    </button>
                                                    <button onclick="postTreatmentStartOnClick({{ step.id }}
                                                            )" type="button" class="btn boutonAction"
                                                            name="showPostForm" title="Ajouter un CI"
                                                            style="width: 30px; padding: 0 0 0 6px;">
                                                        CI<span id="badge-pt-{{ step.id }}"
                                                                style="top: -10px;margin-left: 8%" data-toggle="tooltip"
                                                                title="{{ step.postStepTreatmentREs|length }} post(s) traitement(s)"
                                                                class="badge">{{ step.postStepTreatmentREs|length }}</span>
                                                    </button>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Formulaire d'étape #}
        <div class="row" id="configurationBlock" style="display: none">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div class="box-body">
                    <div class="rubriqueSansMT col-sm-12 col-md-12 col-lg-12">
                        <h3>Paramétrage d'une étape
                            <a href="{{ path('rule_engine_service_help_formule') }}" target="_blank">
                                <button type="button" class="btn boutonAction  pull-right">
                                    Aide pour le meta-langage
                                </button>
                            </a>
                        </h3>
                        {# ###### CONFIGURE STEP BLOCK ###### #}
                        {{ include('rule_engine/config/config_global_step.html.twig') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="application/javascript">
        let serviceSteps = [];
        let currentStepId = null;
        let currentStep = null;
        let currentActionId = null;
        let baseUrl = "{{ full_app_url }}";
        let typeAction = "{{ typeAction }}";
        let serviceStepsID = null;
        let currentMaxStepID = {{ maxStepID }};
        let prerequisiteId = {{ service_re.toArray["prerequisitesServiceRE"]["id"] != null ? service_re.toArray["prerequisitesServiceRE"]["id"] : "null" }};
        let prerequisiteLabel = "{{ service_re.toArray["prerequisitesServiceRE"]["label"] }}";

        // SERVICE URI API
        let listServiceURI = "{{ path('rule_engine_service_index') }}";
        let newServiceURI = "{{ path('rule_engine_service_add_base_info') }}";
        let updateServiceURI = "{{ path('rule_engine_service_update_base_info') }}";
        let applyProductionServiceURI = "{{ path('rule_engine_service_apply_production') }}";
        let editServiceAction = "{{ path('rule_engine_service_edit', { "id" : "serviceReId"}) }}";
        let updatePrerequisiteCanBeUpdatedURI = "{{ path('rule_engine_service_prerequisite_can_be_updated') }}";

        // STEP (QUESTION) URI API
        let getStepURI = "{{ path('rule_engine_step_get', { id : "stepId" }) }}";
        let checkUniqRefURI = "{{ path('rule_engine_step_check_ref') }}";
        let changeStatusURI = "{{ path('rule_engine_step_change_status') }}";
        let addOrUpdateStepURI = "{{ path('rule_engine_step_add_update') }}";
        let deleteStepURI = "{{ path('rule_engine_step_delete') }}";
        let addBlankStepURI = "{{ path('rule_engine_step_add_blank') }}";
        let uploadStepFileURI = "{{ path('rule_engine_step_upload_step_file') }}";
        let deleteStepFileURI = "{{ path('rule_engine_step_delete_step_file') }}";
        let updatePrerequisiteServiceURI = "{{ path('rule_engine_service_save_prerequisite') }}";


        // ACTION (RESPONSE) URI API
        let getActionURI = "{{ path('rule_engine_action_get', { id : "actionId" }) }}";
        let addOrUpdateActionURI = "{{ path('rule_engine_action_add_update') }}";
        let deleteActionURI = "{{ path('rule_engine_action_delete') }}";
        let updateDisplayOrderURI = "{{ path('rule_engine_action_update_display_order') }}";

        // VALIDATOR
        let getValidatorURI = "{{ path('rule_engine_validator_get', { id : "validatorId" }) }}";
        let addOrUpdateValidatorURI = "{{ path('rule_engine_validator_add_update') }}";
        let deleteValidatorURI = "{{ path('rule_engine_validator_delete') }}";

        // POST TREATMENT
        let getPostTURI = "{{ path('rule_engine_post_t_get', { id : "postTId" }) }}";
        let addOrUpdatePostTURI = "{{ path('rule_engine_post_t_add_update') }}";
        let deletePostTURI = "{{ path('rule_engine_post_t_delete') }}";


        $(document).ready(function () {
            if (typeAction === "create") {
                if ($("#createServiceSubmitBtn").length > 0) {
                    $("#createServiceSubmitBtn").show();
                }
            } else if (typeAction === "update") {
                serviceReID = "{{ service_re.id }}";
                serviceStepsID = {{ service_re.formatServiceStepsForConfig|json_encode }}
                if (serviceReID !== "") {
                    $("#updateServiceSubmitBtn").show();
                    $("#putInProdSubmitBtn").show();
                    $("#configurationBlock").show("slow");
                    $("#configurationListBlock").show("slow");

                    if (serviceStepsID.length > 0) {
                        initNextStepRef();
                        $("#summaryStepBlock").hide();
                        $("#summaryNotBlankStepBlock").show("slow");
                    } else {
                        $("#summaryStepBlock").show();
                        $("#summaryNotBlankStepBlock").hide();
                    }
                }
            }
            $("#configurationBlock").hide();
            $("#prerequisite_id").select2({
                width: '50%',
                placeholder: "-- Sélectionnez un prérequis --",
                allowClear: false,
                language: "fr",
            });
            $("#labelPrerequisite")[0].innerText = prerequisiteLabel;
            $('#prerequisite_id').val(prerequisiteId); // Change the value or make some change to the internal state
            $('#prerequisite_id').trigger('change.select2');

        })
        let param = {"searching": true};

        function initImportLoader() {
            let inputFile = document.getElementById('importServiceFile');
            if (inputFile.value === "") {
                createToast("error", "Veuillez importer un logo avant de valider");
                inputFile.style.border = "1px solid red";
            } else {
                $("#importLogoService").submit();
            }
        }

        function changeImportFileEvent() {
            let inputFile = document.getElementById('importServiceFile');
            if (inputFile.value === "") {
                createToast("error", "Veuillez importer un document");
                inputFile.style.border = "1px solid red";
            } else {
                const [file] = inputFile.files
                if (file.type !== "image/png" && file.type !== "image/svg+xml") {
                    createToast("danger", "Le format du fichier est incorrect. Seul le format PNG ou SVG est autorisé.");
                    $("#importServiceFile").val(null);
                    $("#logoFilename").text(null);
                } else {
                    inputFile.style.border = "0";
                    const reader = new FileReader();
                    $("#logoFilename").text(file.name);

                    reader.onload = (theFile) => {
                        const image = new Image();
                        image.src = theFile.target.result;
                        image.onload = () => {
                            if (file.type !== "image/png" && file.type !== "image/svg+xml") {
                                createToast("danger", "Le format du fichier est incorrect. Seul le format PNG ou SVG est autorisé.");
                                $("#importServiceFile").val(null);
                                $("#logoFilename").text(null);
                            } else {
                                $("#logoFilename").text(file.name);
                            }
                        };
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
    </script>
    {{ macro.simple_popup("danger") }}
    {{ macro.simple_popup("info") }}
{% endblock %}