{% import 'servicos/_blocks/field-template' as fieldTemplate %}
{% set form = craft.expressforms.form(formHandle) %}
{% set id = form.handle ~ '-form' %}
{{ form.openTag({
    return: '?success=1',
    attributes: {
        id: id,
        class: 'm-ajax-form'
    },
}) }}
    <div class="c-alert-message m-warning m-validation-error" style="display: none;">
        <i class="ico fa fa-exclamation-circle"></i>
    </div>

    <div class="c-alert-message m-success" style="display: none;">
        <i class="ico fa fa-check-circle"></i>
    </div>
    <h2>{{ 'Representante Familiar'|t }}</h2>
    <div class="row">
    {% for field in form.fields %}
        {% switch field.handle %}
            {% case 'name' %}
            {{ fieldTemplate.getField(field, 'col-md-12 col-sm-12 col-xs-12') }}
            {% case 'email' %}
            {{ fieldTemplate.getField(field, 'col-md-12 col-sm-12 col-xs-12') }}
            {% case 'phone' %}
            {{ fieldTemplate.getField(field, 'col-md-6 col-sm-6 col-xs-12') }}
            {% case 'nif' %}
            {{ fieldTemplate.getField(field, 'col-md-6 col-sm-6 col-xs-12') }}
        {% endswitch %}
    {% endfor %}
    </div>
    <div class="row">
        <div class="info-forms col-md-12 col-sm-12 col-xs-12">
            <h4>
                {{ 'Informações de Morada'|t }}
            </h4>
        </div>
        {% for field in form.fields %}
            {% switch field.handle %}
            {% case 'morada' %}
                {{ fieldTemplate.getField(field, 'col-md-12 col-sm-12 col-xs-12') }}
            {% case 'localidade' %}
                {{ fieldTemplate.getField(field, 'col-md-6 col-sm-6 col-xs-12') }}
            {% case 'postalCode' %}
                {{ fieldTemplate.getField(field, 'col-md-6 col-sm-6 col-xs-12') }}
            {% endswitch %}
        {% endfor %}
    </div>
    <div class="row">
        <div class="info-forms col-md-12 col-sm-12 col-xs-12">
            <h4>
                {{ 'Mais informações'|t }}
            </h4>
        </div>
        {% for field in form.fields %}
            {% if field.handle != 'name'
               and field.handle != 'email'
               and field.handle != 'phone'
               and field.handle != 'nif'
               and field.handle != 'morada'
               and field.handle != 'localidade'
               and field.handle != 'postalCode'
               and field.handle != 'tamanhoDoAgregadoFamiliar'
               and field.handle != 'acceptTerms'
               and field.handle != 'grauDeParentesco'
               and field.handle != 'pessoa1'
               and field.handle != 'pessoa2'
               and field.handle != 'pessoa3'
               and field.handle != 'pessoa4'
               and field.handle != 'pessoa5'
               and field.handle != 'pessoa6'
               and field.handle != 'pessoa7'
               and field.handle != 'pessoa8'
               and field.handle != 'pessoa9'
               and field.handle != 'pessoa10'
            %}
            {{ fieldTemplate.getField(field, 'col-md-6 col-sm-6 col-xs-12') }}
            {% endif %}
        {% endfor %}
    </div>
    <div class="row">
        <div class="info-forms col-md-12 col-sm-12 col-xs-12">
            <h4>
                {{ 'Agregado Familiar'|t }}
            </h4>
        </div>
        {{ fieldTemplate.getFieldSelect(form.fields.tamanhoDoAgregadoFamiliar, 'col-md-12 col-sm-12 col-xs-12') }}
        <div class="person-form-wrapper col-md-12 col-sm-12 col-xs-12">
            {% for i in 1..10 %}
            <div class="person-wrapper" id="pessoa1">
                <button class="accordion-opener" type="button">{{ 'Pessoa'|t}} {{ i }}</button>
                <div class="form-fields row">
                    {% for field in form.fields %}
                        {% switch field.handle %}
                        {% case 'name' %}
                            {{ fieldTemplate.getFieldCustom(field, 'col-md-12 col-sm-12 col-xs-12', 'pessoa' ~ i) }}
                        {% case 'email' %}
                            {{ fieldTemplate.getFieldCustom(field, 'col-md-12 col-sm-12 col-xs-12', 'pessoa' ~ i) }}
                        {% case 'grauDeParentesco' %}
                            {{ fieldTemplate.getFieldCustom(field, 'col-md-12 col-sm-12 col-xs-12', 'pessoa' ~ i) }}
                        {% case 'phone' %}
                            {{ fieldTemplate.getFieldCustom(field, 'col-md-6 col-sm-6 col-xs-12', 'pessoa' ~ i) }}
                        {% case 'nif' %}
                            {{ fieldTemplate.getFieldCustom(field, 'col-md-6 col-sm-6 col-xs-12', 'pessoa' ~ i) }}
                        {% endswitch %}
                    {% endfor %}
                    <div class="info-forms col-md-12 col-sm-12 col-xs-12">
                        <h4>
                            {{ 'Informações de Morada'|t }}
                        </h4>
                    </div>
                    {% for field in form.fields %}
                        {% switch field.handle %}
                        {% case 'morada' %}
                            {{ fieldTemplate.getFieldCustom(field, 'col-md-12 col-sm-12 col-xs-12', 'pessoa' ~ i) }}
                        {% case 'localidade' %}
                            {{ fieldTemplate.getFieldCustom(field, 'col-md-6 col-sm-6 col-xs-12', 'pessoa' ~ i) }}
                        {% case 'postalCode' %}
                            {{ fieldTemplate.getFieldCustom(field, 'col-md-6 col-sm-6 col-xs-12', 'pessoa' ~ i) }}
                        {% endswitch %}
                    {% endfor %}
                    <div class="info-forms col-md-12 col-sm-12 col-xs-12">
                        <h4>
                            {{ 'Mais informações'|t }}
                        </h4>
                    </div>
                    {% for field in form.fields %}
                        {% if field.handle != 'name'
                            and field.handle != 'email'
                            and field.handle != 'phone'
                            and field.handle != 'nif'
                            and field.handle != 'morada'
                            and field.handle != 'localidade'
                            and field.handle != 'postalCode'
                            and field.handle != 'tamanhoDoAgregadoFamiliar'
                            and field.handle != 'acceptTerms'
                            and field.handle != 'grauDeParentesco'
                            and field.handle != 'pessoa1'
                            and field.handle != 'pessoa2'
                            and field.handle != 'pessoa3'
                            and field.handle != 'pessoa4'
                            and field.handle != 'pessoa5'
                            and field.handle != 'pessoa6'
                            and field.handle != 'pessoa7'
                            and field.handle != 'pessoa8'
                            and field.handle != 'pessoa9'
                            and field.handle != 'pessoa10'
                        %}
                            {{ fieldTemplate.getFieldCustom(field, 'col-md-6 col-sm-6 col-xs-12', 'pessoa' ~ i) }}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            {% endfor %}

        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <hr>
        </div>
        {{ fieldTemplate.getField(form.fields.acceptTerms, 'col-md-12 col-sm-12 col-xs-12') }}
    </div>
    <div class="form-group submit">
        <button type="submit" class="submit-btn c-button"
                data-loading-label="{{ 'A envia...'|t }}" data-label="{{ 'Enviar Pedido'|t }}">
            {{ 'Enviar Pedido'|t }}
        </button>
    </div>
{{ form.closeTag }}
{% include '_components/ajax-submit' with {
    id: id
} %}

{% block footerJs %}
    <script>
        let personSelect = document.querySelector('#atestadoDeAgregadoFamiliar-form select')
        let personWrapper = document.querySelectorAll('#atestadoDeAgregadoFamiliar-form .person-form-wrapper .person-wrapper')
        let accordionOpener = document.querySelectorAll('.accordion-opener')

        personSelect.addEventListener('change', (event) => {
            if(event.target.value > 0) {
                personWrapper.forEach((wrapper) => {
                    wrapper.classList.remove('active')
                })
                for(let i = 0; i < event.target.value; i++) {
                    personWrapper[i].classList.add('active');
                }
                console.log(event.target.value)
            }else {
                personWrapper.forEach((wrapper) => {
                    wrapper.classList.remove('active')
                })
            }

        })

        accordionOpener.forEach((wrapper) => {
            wrapper.addEventListener('click', () => {
                wrapper.parentNode.querySelector('div').classList.toggle('active')
            })
        })
    </script>
{% endblock %}