{% extends '@InstallBois/index.html.twig' %}
{% import "rule_engine/macro/service_diagram_block_macro.twig" as diagram_macro %}

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

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

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('install-bois/css/service_diagram_macro.css') }}">
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('install-bois/rule-engine/show_service_diagram.js') ~ "?rnd=" ~ random() }}"></script>
    <script src="{{ asset('install-bois/rule-engine/customer/httpServiceRequest.js') ~ "?rnd=" ~ random() }}"></script>
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Services | Diagramme : {{ service_re.label }} - <small>Version : {{ service_re.version }}</small>
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row rubrique">
            {#            {{ dump(listOfStepRef) }} #}
            <h4>Démarrer directement le diagramme à l'étape : </h4>
            <div style="width: 50%;margin-bottom: 20px">
                <select id="jumpToRef" name="jumpToRef" class="form-control">
                    <option value="null" style="color:#d2d6de">-- Sélectionnez une référence d'étape --</option>
                    {% for stepRef in listOfStepRef %}
                        <option value="{{ stepRef.reference }}"><span
                                    style="font-weight: bolder;font-size: 25px;">[ {{ stepRef.reference }} ]</span> {{ stepRef.label }}
                        </option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="row rubrique" style="margin-top: 10px">
            <fieldset class="fieldsetLegend">
                <legend class="legendCiTitle">Légende</legend>
                <div class="baseDivStepCIBlock legendCi" style="width: 80px;background-color: #cd1616"></div>
                Contrôle intermédiaire - <small>(déclenché <span style="color:red">au chargement</span> d'une
                    étape)</small><br><br>
                <div class="baseDivStepCIBlock legendCi" style="width: 80px;background-color: #002e3b"></div>
                Étape du service contenant la question à poser <small></small><br><br>
                <div class="baseDivStepCIBlock legendCi" style="width: 80px;background-color: #ED7D31"></div>
                Contrôle intermédiaire - <small>(déclenché <span style="color:red">à la fin</span> d'une
                    étape)</small><br><br>
                <div class="baseDivStepCIBlock legendCi" style="width: 80px;background-color: #D9D9D9"></div>
                Réponse à la question affichée au-dessus <small></small><br><br>
                <div class="baseDivStepCIBlock legendCi" style="width: 80px;background-color: #00708E"></div>
                Validateur de la réponse affichée au-dessus <small></small><br><br>

                <button onclick="topFunction()" id="goToTopDiagramBtn" title="Go to top">Remonter <i
                            class="fas fa-arrow-up"></i></button>
            </fieldset>
            <table id="tableGlobalDiag" style="width: 100%">
                <tr id="step-{{ service_re.firstStepAsObject.id }}">
                    <td style="width: 10%"></td>
                    <td style="width: 10%"></td>
                    <td style="width: 10%"></td>
                    <td style="width: 30%;border-bottom:2px solid black;">
                        {# STEP  #}
                        {{ diagram_macro.createStepBlock(service_re.firstStepAsObject) }}
                        <div style="width: 28px;background-color:black;border-radius: 40px;border:2px solid black;height: 26px;display: block;margin-left: 42%;margin-bottom: -15px;"></div>
                    </td>
                    <td style="width: 10%"></td>
                    <td style="width: 10%"></td>
                    <td style="width: 10%"></td>
                </tr>
                {{ diagram_macro.createLineActions(service_re.firstStepAsObject.id, service_re.firstStepAsObject.actionREs) }}
            </table>
        </div>
    </div>

    <script type="application/javascript">
        let serviceId = {{ service_re.id }};
        // STEP (QUESTION) URI API
        let getStepURI = "{{ path('rule_engine_step_get', { id : "stepId" }) }}";
        let getStepByRefAndServiceIdURI = "{{ path('rule_engine_step_by_ref_service') }}";

        // ACTION (RESPONSE) URI API
        let getActionURI = "{{ path('rule_engine_action_get', { id : "actionId" }) }}";

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

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

        $(document).ready(function () {
            $("#jumpToRef").select2({
                width: '100%',
                allowClear: false,
                language: "fr",
            });

            $('#jumpToRef').on('select2:select', function (e) {
                let refStepSelected = e.params.data.id;
                let uri = getStepByRefAndServiceIdURI + "?serviceId=" + serviceId + "&nextStepRef=" + refStepSelected;
                $("#tableGlobalDiag tbody").empty();
                get(uri).then(response => callbackGetStepInfo(response));
            });
        });
    </script>
{% endblock %}