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

{% block title %}Choix des critères{% endblock %}

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

{% block navAction %}
        <paper-button onclick="href('{{ path('simulateur_index') }}')">
            Retour
        </paper-button>
{% endblock %}

{%  block _beneficiaires_criteres_entry_widget %}
    <paper-card class="critere-card-container">
        <div class="card-content">
            <td>{{ form_widget(form.roles) }}</td>
            <td ><a href="javascript:void(0);" onclick="suppressionVariable(this.parentElement)" class="btn-suppression-criteres">X</a></td>
        </div>
        <div class="card-actions">
            {% if form.dateNaissance is defined %}
                <td>{{ form_widget(form.dateNaissance) }}</td>
            {% endif %}
            {% if form.codePostal is defined %}
                <td>{{ form_widget(form.codePostal) }}</td>
            {% endif %}
            <td>{{ form_widget(form.criteresAvecValeur) }}</td>
            <td>{{ form_widget(form.variables) }}</td>

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

{% form_theme form _self %}

{% block page %}
    <div class="row">
        <div class="flex-lg-4 flex-md-5 flex-sm-6">
            {{ form_start(form, {'isAjax' : true }) }}
                <div class="btn-right" data-list="email-fields-list">
                    <div class="row">
                        <div class="flex-lg-6 flex-md-6 flex-sm-12">
                            {{ form_widget(form.dateEffet, {'label' : 'Date d\'effet'}) }}
                        </div>
                        <div class="flex-lg-6 flex-md-6 flex-sm-12">
                            <paper-button type="button" onclick="ajoutElementsCollection(this.parentElement.parentElement.parentElement); cacherDonneesDates()"
                              class="add-another-collection-widget">Ajouter un bénéficiaire</paper-button>
                        </div>
                    </div>
                </div>
                <ul id="email-fields-list" class="collection-criteres"
                    data-prototype="{{ form_widget(form.criteres.vars.prototype)|e }}"
                    data-widget-tags="">
                    {% for critereField in form.criteres %}
                        <li>
                            {{ form_errors(critereField) }}
                            {{ form_widget(critereField) }}
                        </li>
                    {% endfor %}
                </ul>

                <div class="btn-submit" style="text-align: center">
                    {{ form_widget(form.submit) }}
                </div>
                {{ form_widget(form) }}
            {{ form_end(form) }}
        </div>

        <div class="flex-lg-8 flex-md-7 flex-sm-6">
            <mgc-xhr-component id="xhrComponent" style="flex: 3;"></mgc-xhr-component>
        </div>
        {#<div>
            {% if packages|length > 0 %}
                {% for package in packages %}

                    {{ package.libelle }}
                    {% for key, resultat in resultatsPackages[package.id] %}
                        {% if composantsPackages[package.id][key].idTypeComposant != 'Tarificateur' %}
                            <mgc-composant-item composant="{{ composantsPackages[package.id][key] | json_encode }}" id="composant_{{ composantsPackages[package.id][key].id }}"
                                                class="composant-item-sans-height" >
                                <div slot="content">
                                    <h1>{{ resultat.getResultatTotal() }}€</h1>
                                </div>
                            </mgc-composant-item>
                            {% set coutTotal = coutTotal + resultat.getResultatTotal() %}
                        {% endif %}
                    {% endfor %}

                    <div>{{ coutTotal }}€</div>
                {% endfor %}
            {% endif %}
        </div>#}

    </div>

    <script>
        const ironForm = document.querySelector('iron-form');
        ironForm.addEventListener('iron-form-response', function(event) {
            var value = event.detail.response.replace(/(\r\n|\n|\r)/gm," ");
            var regex = /^s:\d+:"(.*)";$/g;
            m = regex.exec(value);
            newEvent = {detail: {response: m[1]}};
            window.xhrComponent.handleResponse(newEvent);
            //this.querySelector('#xhrComponent').innerHTML = JSON.stringify(event.detail);
        });

        var cacherDonneesDates = function(){
            var beneficiairesData = document.querySelectorAll('.beneficiaire_data');
            if(beneficiairesData.length > 0){
                beneficiairesData.forEach(function(benficiaireData){
                    var aDonneesAffichee = benficiaireData.querySelectorAll('div');
                    if(aDonneesAffichee.length <= 0){
                        benficiaireData.parentElement.style.display = 'none';
                    }
                })
            }
        }

        cacherDonneesDates();
    </script>
{% endblock %}