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

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

{% block head %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js">
{% endblock %}

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

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Administration | Configurer les services
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row rubrique">
            <div class="rubrique_titre">
                {% if canEdit %}
                    <span>Version du service : {{ service_r_es[service_r_es|length-1].label|upper }}</span>
                {% else %}
                    <span>Liste des services</span>
                {% endif %}
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div class="float-right">
                    {% if not canEdit %}
                        <a href="{{ path('rule_engine_service_new') }}">
                            <button type="button" class="btn boutonAction">
                                <i class="icon fa fa-plus"></i>
                                Créer un nouveau service
                            </button>
                        </a>
                    {% else %}
                        <a href="{{ path('rule_engine_service_create_new_version', { "id" : service_r_es[(service_r_es|length -1)].id}) }}">
                            <button type="button" class="btn boutonAction">
                                <i class="icon fa fa-plus"></i>
                                Ajouter une nouvelle version
                            </button>
                        </a>
                    {% endif %}
                </div>
                <table id="services_list" class="row-border" style="">
                    <thead>
                    <tr>
                        {% if groupedService == false %}
                            <th>Ordre</th>
                        {% endif %}
                        <th>Libellé</th>
                        {% if groupedService %}
                            <th>État</th>
                        {% endif %}
                        <th>Nombre d'étape</th>
                        <th>Version</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>

                    {% for service_r_e in service_r_es %}
                        <tr id="{{ 'service-' ~ service_r_e.slug }}">
                            {% if groupedService %}
                                {% if loop.index0 == 0 %}
                                    <td {{ groupedService ? "rowspan=" ~ service_r_es|length : "" }}>
                                        {{ service_r_es[service_r_es|length-1].label|upper }}
                                        {% if service_r_es[service_r_es|length-1].logoFilepath != null %}
                                            <br><img src="{{ asset(service_r_es[service_r_es|length-1].logoFilepath) }}"
                                                     style="width: 50px;max-width: 50px;" alt="Logo"/>
                                        {% endif %}
                                    </td>
                                {% endif %}
                            {% else %}
                                <td>{{ service_r_e.displayOrder }}</td>
                                <td>{{ service_r_e.label }}</td>
                            {% endif %}
                            {% if service_r_e.status == "DRAFT" %}
                                {% set backgroundC = "#C00000" %}
                            {% elseif service_r_e.status == "PRODUCTION" %}
                                {% set backgroundC = "#92D050" %}
                            {% else %}
                                {% set backgroundC = null %}
                            {% endif %}
                            {% if groupedService %}
                                <td style="{{ backgroundC != null ? "color:white" : "color:#7F7F7F" }};background-color: {{ backgroundC }}">{{ service_r_e.statusName(service_r_e.status) }}</td>
                            {% endif %}
                            <td>{{ service_r_e.stepREs|length }}</td>
                            <td>{{ service_r_e.version }}</td>
                            <td>
                                {% if is_granted("ROLE_ADMIN") and groupedService and app.environment === 'prod' %}
                                    <button
                                            onclick="verifyIfExists({{ service_r_e.id }})"
                                            type="button"
                                            class="btn boutonAction">
                                        DEV
                                    </button>
                                {% endif %}
                                {% if canEdit==false %}
                                    <a href="{{ path('rule_engine_service_index', {'slug': service_r_e.slug}) }}">
                                        <button
                                                type="button"
                                                class="boutonAction"
                                                style="background-color: transparent">
                                            <img src="{{ asset('install-bois/icon/tab_action_consulter.png') }}"
                                                 alt="Supprimer"/>
                                        </button>
                                    </a>
                                {% endif %}
                                <a href="{{ path('rule_engine_front_start_test', {'id': service_r_e.id}) }}">
                                    <button
                                            {{ service_r_e.stepREs.count == 0 ? 'disabled="disabled"' : '' }}
                                            type="button"
                                            class="btn boutonAction">
                                        TEST
                                    </button>
                                </a>
                                {% if canEdit %}
                                    {% if service_r_e.status != "PRODUCTION" and service_r_e.status != "OBSOLETE" %}
                                        <a href="{{ path('rule_engine_service_edit', {'id': service_r_e.id}) }}">
                                            <button
                                                    type="button"
                                                    class="btn boutonAction">
                                                <img src="{{ asset('install-bois/icon/tab_action_modifier.png') }}"
                                                     alt="Modifier">
                                            </button>
                                        </a>
                                    {% endif %}
                                {% endif %}
                                {% if groupedService %}
                                    <button
                                            data-toggle="modal"
                                            data-target="#popup-danger-{{ service_r_e.id }}"
                                            type="button"
                                            class="boutonAction"
                                            style="background-color: transparent">
                                        <img src="{{ asset('install-bois/icon/tab_action_supprimer.png') }}"
                                             alt="Supprimer"/>
                                    </button>
                                    {{ macro.popup(
                                        "danger",
                                        "serviceRE-delete-" ~ service_r_e.id,
                                        path('rule_engine_service_delete', {'id': service_r_e.id}),
                                        service_r_e.id
                                    ) }}
                                {% endif %}
                                {% if canEdit %}
                                    <button
                                            onclick="openDiagramIntoWindowModal({{ service_r_e.id }})"
                                            type="button"
                                            class="btn boutonAction"
                                            style="padding: 5px 11px 2px;">
                                        <i class="fas fa-project-diagram"></i>
                                    </button>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {% if groupedService %}
                    <a href="{{ path('rule_engine_service_index', { 'slug':service_r_es[0].slug, 'all':'1' }) }}">
                        <button style="margin: 2% 0;" type="button" class="boutonAction pull-right">Afficher toutes les
                            versions
                        </button>
                    </a>
                {% endif %}
                {% if canEdit %}
                    <a href="{{ path('rule_engine_service_index') }}">
                        <button style="margin: 2% 0;" type="button" class="boutonRetour pull-left">Retour à la liste des
                            services
                        </button>
                    </a>
                {% endif %}
                {{ include('rule_engine/service_re/send_to_dev_popup.html.twig') }}
                <script type="application/javascript">
                    let windowShowServiceDiagram;
                    // Service URI API
                    let showServiceDiagramURI = "{{ path('rule_engine_service_show_diagram', { id : "serviceId" }) }}";
                    let checkUniqVersionURI = "{{ path('rule_engine_service_check_version') }}";
                    let canGoTotheNextStep = false;

                    let shouldBeOrg = {{ service_r_es|length > 8 ? "true" : "false" }};
                    let param = {
                        "pageLength": 8,
                        "searching": shouldBeOrg,
                        order: [[1, "desc"], [0, "desc"]],
                    };

                    // initDatatable('#services_list', param, [4], false, shouldBeOrg);

                    function initNewServiceVersionForm(serviceID, serviceLabel) {
                        $("#serviceId").val(serviceID);
                        $("#spanServiceLabel")[0].innerText = serviceLabel;
                    }

                    function onClickNewServiceVersion() {
                        checkInputVersion();
                        if (canGoTotheNextStep) {
                            $("#newServiceVersionForm").submit();
                        }
                    }

                    function checkInputVersion() {
                        if ($(`#newServiceVersion`).val().length > 0) {
                            $(`#newServiceVersion`).attr('style', "border-color:#7f7f7f!important");
                            $(`#newServiceVersionRequired`).hide();
                        } else {
                            $(`#newServiceVersion`).attr('style', "border-color:#BD582C!important");
                            $(`#newServiceVersionRequired`).show();
                            canGoTotheNextStep = false;
                        }
                    }

                    /**
                     * Check if service version is uniq
                     * @param label
                     * @param version
                     */
                    function checkIfIsUniqServiceVersion(label, version) {
                        const data = new FormData()
                        data.append('label', label);
                        data.append('version', version);

                        fetch(checkUniqVersionURI, {
                            method: 'post',
                            body: data
                        })
                            .then(async function (response) {
                                let data = await response.json();
                                if (!data.isUniqVersion) {
                                    $(`#versionNotUniqSpan`).show();
                                    $(`#newServiceVersion`).attr('style', "border-color:#BD582C!important");
                                    canGoTotheNextStep = false;
                                } else {
                                    $(`#versionNotUniqSpan`).hide();
                                    $(`#newServiceVersion`).attr('style', "border-color:#7f7f7f!important");
                                    canGoTotheNextStep = true;
                                }
                            })
                    }

                    const sendToDev = idService => {
                        let urlSendToDev = '{{ path('rule_engine_service_send_service_to_dev') }}';
                        $.ajax({
                            url: urlSendToDev,
                            type: 'POST',
                            dataType: 'json',
                            data: {'id': idService},
                            success: res => {
                                if (res.status === "SUCCESS") {
                                    createToast('success', 'Copie réalisée avec succès');
                                }
                            }, error: res => {
                                createToast('danger', res.message);
                            }
                        });
                    };

                    const verifyIfExists = id => {
                        let url = '{{ path('rule_engine_service_verify_if_service_exists', {'id': 'XXID'}) }}';
                        url = url.replace('XXID', id);
                        $.ajax({
                            url: url,
                            type: 'GET',
                            dataType: 'json',
                            success: res => {
                                if (res.status === "SUCCESS") {
                                    if (res.result.length > 0) {
                                        $('#serviceExists').show();
                                    } else {
                                        $('#serviceExists').hide();
                                    }
                                    $('#modal-send-to-dev').modal("show");
                                    $('#btnSendToDev').off('click');
                                    $('#btnSendToDev').on('click', () => sendToDev(id));
                                }
                            }, error: res => {
                                createToast('danger', 'Erreur lors de la requête');
                            }
                        });
                    }

                    function openDiagramIntoWindowModal(serviceId) {
                        let w = 1710;
                        let h = 880;
                        let left = (screen.width / 2) - (w / 2);
                        let top = (screen.height / 2) - (h / 2);

                        windowShowServiceDiagram = window.open(
                            showServiceDiagramURI.replace("serviceId", serviceId),
                            "windowEditProduct",
                            'dependent=yes, toolbar=no, location=no, directories=no, status=yes, menubar=no, scrollbars=no, resizable=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left
                        );
                    }


                    if ({{ groupedService|json_encode() }} ===
                    false
                    )
                    {
                        $("#services_list tbody").sortable({
                            placeholder: "ui-state-highlight",
                            update: function (event, ui) {
                                reorganizeOrderAction();
                            }
                        });
                        $("#services_list tbody").disableSelection();
                    }

                    function reorganizeOrderAction() {
                        $('#services_list tbody tr').each(function (tr) {
                            $('#services_list tbody tr')[tr].children[0].innerText = tr + 1;
                            let serviceSlug = $('#services_list tbody tr')[tr].id.split("-")[1];
                            let dataFormatted = {"serviceSlug": serviceSlug, "displayOrder": (tr + 1)};
                            updateOrder(dataFormatted);
                        });
                    }

                    function updateOrder(data) {
                        $.ajax({
                            url: '{{ path('rule_engine_service_update_order') }}',
                            type: 'POST',
                            dataType: 'json',
                            data: JSON.stringify(data),
                            success: function (res) {

                            }, error: function (res) {

                            }
                        });
                    }

                </script>
            </div>
        </div>
    </div>
{% endblock %}