{% extends 'page_simulateur.html.twig' %}

{% block title %}Simulateur{% endblock %}

{% block style %}
    <link rel="stylesheet" type="text/css" is="custom-style"
          href="{{ app.request.getBaseURL() }}/assets/css/simulateur/index.css">
{% endblock %}

{% block navAction %}
    {% if composant.idTypeComposant.libelle != 'Tarificateur' %}
        <paper-button onclick="href('{{ path('simulateur_index') }}')">
            Retour
        </paper-button>
    {% endif %}
{% endblock %}

{% block page %}
    {% if composant.idTypeComposant.libelle == 'Tarificateur' %}
        <paper-card>
            <h5>Offres</h5>
            <div class="flex flex-simulateur">
                {% for composant in enfants %}
                    <mgc-composant-item
                            composant="{{ composant | json_encode }}"
                            url="{{ path('simulateur_index', {'id': composant.id}) }}">
                    </mgc-composant-item>
                {% endfor %}
            </div>
        </paper-card>

        <paper-card>
            <h5>Packages</h5>
            <div class="flex flex-simulateur">
                {% for package in packages %}
                    <mgc-package-item
                            package="{{ package | json_encode }}"
                            url="{{ path('simulateur_selection', {'package_id': package.id, 'est_package' : 1}) }}">

                    </mgc-package-item>

                {% endfor %}
            </div>
        </paper-card>

    {% endif %}

    {% if composant.idTypeComposant.libelle != 'Tarificateur' %}
        <div class="composants-container">
            <mgc-composant-item composant="{{ composant | json_encode }}" class="composant-item-sans-height">
                <div slot="content" class="action-composant-item">
                    <form method="post" action="{{ path('simulateur_selection') }}">
                        <input type="hidden" name="composantsSelectionnes">
                        <input type="hidden" name="_method" value="POST">
                        <paper-button onclick="soumettreComposant(this)">Simuler</paper-button>
                    </form>
                </div>
            </mgc-composant-item>

            {% set codeDejaAffiche = [] %}
            {% for composant in listeComposantHierarchise %}
                <div style="margin-left: {{ 20 * composant.niveau }}px; {% if composant.niveau > 2 %}display: none;{% endif %}"
                     class="sous-composants-container sous-composants-container-{{ composant.niveau }}">
                    {% for child in composant.children %}
                        {% set composantNiveau = child.id %}
                        {% set enfant = enfants[composantNiveau] %}
                        {% if enfant.code not in codeDejaAffiche %}
                            <mgc-composant-item composant="{{ enfant | json_encode }}"
                                                id="composant_{{ enfant.id }}"
                                                {% if enfant.childSelectionMultiple %}data-child-selection-multiple="true"{% endif %}
                                    {% if enfant.childSelectionRequired %}data-child-selection-required="true"{% endif %}
                                    {% if enfant.childSelectionOptional %}data-child-selection-optional="true"{% endif %}
                                                class="composant-item-sans-height enfant-{{ enfant.idParent.id }}"
                                                onclick="selectComposant(this, {{ enfant.id }}, true)"
                                                style="{% if enfant.idTypeComposant.libelle != 'Offre' %}display: none;{% endif %}">
                            </mgc-composant-item>
                            {% set codeDejaAffiche = codeDejaAffiche|merge([enfant.code]) %}
                        {% endif %}
                    {% endfor %}
                </div>
            {% endfor %}

        </div>
    {% endif %}


{% endblock %}

{% block javascript_end %}
    <script>
        var composantsActifs = [];
        var ouvrir = true;

        var selectComposant = function (current, id, estInitiateur) {
            id = parseInt(id);
            var index = composantsActifs.indexOf(id)
            var element = getComposantById(id);
            if (index !== -1) {
                composantsActifs.splice(index, 1);
                element.classList.remove("composant-actif");
            } else if (estInitiateur) {

                var parentId = getElementParentId(element);
                var parent = getComposantById(parentId);
                var parentChildAlreadySelected = isChildSelectedByParentId(parentId);

                if (parent && !parent.hasAttribute('data-child-selection-multiple') && parentChildAlreadySelected) {
                    var nomComposant = getComposantCode(parent).Nom;
                    var typeComposant = getComposantCode(parent).IdTypeComposant.Libelle
                    alert(`La sélection multiple n'est pas autorisé pour le composant ${typeComposant} ${nomComposant}.`);
                } else {
                    composantsActifs.push(id);
                    element.classList.add("composant-actif");
                }
            }

            const enfants = current.parentElement.parentElement.querySelectorAll('.enfant-' + id);
            enfants.forEach(function (enfant) {
                if ((estInitiateur && enfant.style.display === 'none') || (!estInitiateur && ouvrir === true)) {
                    enfant.style.display = 'block';
                    enfant.parentElement.style.display = 'flex';
                    if (estInitiateur) {
                        ouvrir = true
                    }
                } else {
                    enfant.style.display = 'none';
                    const id = enfant.id.split("composant_");
                    if (estInitiateur) {
                        ouvrir = false
                    }
                    selectComposant(enfant, id[1])
                }
            })
        };

        var soumettreComposant = function (el) {
            
            if (composantsActifs.length <= 0) {
                alert('Veuillez selectionner un composant.');
                return;
            }

                var composantsActifsSelectionObligatoireManquante = composantsActifs
                    .map(function (idComposant) {
                        return getComposantById(idComposant);
                    })
                    .filter(function (composant) {
                        var composantHasChildSelectionRequired = isChildSelectionRequired(composant);
                        var composantChildAlreadySelected = isChildSelectedByParentId(getComposantId(composant));

                        return composant && composantHasChildSelectionRequired && !composantChildAlreadySelected;
                    });
            composantsActifs
                .map(function (idComposant) {
                    return getComposantById(idComposant);
                })
                .forEach(function (composant) {
                    var composantHasChildSelectionOptional = isChildSelectionOptional(composant);
                    var composantChildAlreadySelected = isChildSelectedByParentId(getComposantId(composant));

                    if (composant && composantHasChildSelectionOptional && !composantChildAlreadySelected) {
                        var composantCode = getComposantCode(composant);
                        var nomComposant = composantCode.Nom;
                        var typeComposant = composantCode.IdTypeComposant.Libelle
                        alert(`PI: Vous n'avez pas sélectionné de composant enfant facultatif pour le composant ${typeComposant} ${nomComposant}.`)
                    }
                });

            if (0 === composantsActifsSelectionObligatoireManquante.length) {
                document.querySelector("input[name='composantsSelectionnes']").value = JSON.stringify(composantsActifs);

                el.parentElement.submit();
                return;
            }

                    composantsActifsSelectionObligatoireManquante.forEach(function (composant) {
                        var composantCode = getComposantCode(composant);
                        var nomComposant = composantCode.Nom;
                        var typeComposant = composantCode.IdTypeComposant.Libelle
                        var enfantComposants = getChildByParentId(composantCode.Id)
                        var composantsAvecSelectionObligatoire = enfantComposants.filter(function (child) {
                            return isChildSelectionRequired(child);
                        });
                        if (1 === composantsAvecSelectionObligatoire.length) {
                            var composantEnfantCode = getComposantCode(composantsAvecSelectionObligatoire[0]);
                            var nomComposantEnfant = composantEnfantCode.Nom;
                            var typeComposantEnfant = composantEnfantCode.IdTypeComposant.Libelle
                            alert(`Vous devez sélectionner le composant ${typeComposantEnfant} ${nomComposantEnfant} pour le composant ${typeComposant} ${nomComposant}.`)
                        } else {
                            alert(`Vous devez sélectionner au moins un composant enfant pour le composant ${typeComposant} ${nomComposant}.`)
                        }

                    });
        }

        var getElementParentId = function (element) {
            return element.className.split(' ').find(function (c) {
                return /^enfant-[0-9]+/.test(c)
            }).replace('enfant-', '');
        }

        var isChildSelectionRequired = function (composant) {
            return composant.hasAttribute('data-child-selection-required');
        }

        var isChildSelectionOptional = function (composant) {
            return composant.hasAttribute('data-child-selection-optional');
        }

        var getComposantById = function (id) {
            return document.querySelector(`#composant_${id}`);
        }

        var isChildSelectedByParentId = function (id) {
            return Array.from(document.querySelectorAll('.composant-actif')).some(function (e) {
                return e.classList.contains(`enfant-${id}`)
            })
        }

        var getChildByParentId = function (id) {
            return Array.from(document.querySelectorAll(`.enfant-${id}`));
        }

        var getComposantId = function (element) {
            return element.id.replace('composant_', '');
        }

        var getComposantCode = function (element) {
            return element && element.hasAttribute('composant') && JSON.parse(element.getAttribute('composant'));
        }
    </script>
{% endblock %}