{% extends '_layouts/base-web-layout' %}
{% import '_macros/setFieldForm' as _set %}

{% block content %}
{% block customCss %}
  <link rel="preload"
    href="/assets/css/pages/contacto.page.css"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'" />
  <noscript>
    <link rel="stylesheet" href="/assets/css/pages/contacto.page.css" />
  </noscript>
{% endblock %}
{% set showBreadcrumb = entry.fieldSwitch %}
{% set breadcrumb = entry.listsLinks.all() ?? [] %}
{% if showBreadcrumb %}
{% include 'components/_breadcrumb' with {
    breadcrumb: breadcrumb,
    headerspacing: false
} %}
{% endif %}
{% css %}
    .contactpage__form  .freeform-label.freeform-required:after {
        content: "*";
        margin-left: 5px;
        color: var(--b-cereza);
    }
    .contactpage__form .ff-form-success {
       display: none;
    }
    .contactpage__form .ff-errors{
        color: var(--b-cereza);
        padding-left: 10px;
        padding-top: 10px;
    }
    .contactpage__form .ff-form-errors{
        display: none;
    }
    .contactpage__form input , .freeform-input{
        border-radius: 0px;
        border: solid 1px #93b0c2;
        text-align: left;
        background-color: transparent;
        line-height: 2.1; 
    }
    .contactpage__form input , .freeform-input:focus{
      background-color: transparent;
    }
    .contactpage__form .freeform-column .freeform-label.freeform-required{
        color: #27251f;
        font-weight:normal;
    }
    .contactpage__form  .freeform-column .freeform-label {
        color: #27251f;
        font-weight:normal;
    }
    .contactpage__form .freeform-column .freeform-label.form-label.freeform-required::after{
      color: var(--b-cereza) !important;
    }
    .contactpage__form  .freeform-column .form-select{
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23991e66'%3E%3Cpath d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
    }
    .contactpage__form select{
        border: solid 1px #93b0c2;
        line-height: 2.1;
    }
    .contactpage__form textarea{
        border: solid 1px #93b0c2;

    }

    .contactpage__form .submit{
        background-color: var(--b-cereza);
        color: var(--a-blanco);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 1rem;
        border: none;
        &::after{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg width='22' height='17' viewBox='0 0 22 17' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='nonzero' stroke='%23fff' fill='none'%3E%3Cpath d='M1.306 8.194h19.388a.307.307 0 0 1 0 .613H1.306a.307.307 0 0 1 0-.613z'/%3E%3Cpath d='M13.01.5c.079 0 .157.03.217.09l7.684 7.695a.31.31 0 0 1 0 .434l-7.684 7.691a.306.306 0 1 1-.434-.434l7.467-7.474-7.467-7.478A.307.307 0 0 1 13.01.5z'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            height: 17px;
            width: 22px;
        }
        &:hover{
            background-color: #991e66;
        }

    }
{% endcss %}
<section class="contactpage">
    <div class="container py-5">
        <div class="row justify-content-between">
            <div class="col-md-4 col-12 mt-5">
                <h1 class="contactpage__title my-3">{{entry.title}}</h1>
                <p class="contactpage__phone">{{'Teléfono'|t}}</p> 
                <ul class="contactpage__listphones">
                    {% for el in entry.phones.all %}
                        <li class="py-1"><a class="click-phone" {{el.phone.getLinkAttributes()}}>{{el.phone.customText}}</a></li>
                    {% endfor %} 
                </ul>
                <p class="contactpage__email"> {{'Correo electrónico'|t}}</p>
                <a href="mailto:{{entry.fieldEmail}}" target="_blank" class=" click-email contactpage__email--link py-3">{{entry.fieldEmail}}</a>
                <ul class="contactpage__listaddress p-0 py-3">
                    {% for item in entry.address.all %}
                        <li>
                            <p class="title">{{item.blocktitle}}</p>
                            <a class="click-maps" target="{{ item.addressLink.getTarget() }}" href="{{item.addressLink.getUrl()}}">{{item.address}}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="col-md-6 col-12 mt-5">
                <div class="contactpage__content w-100  py-0">
                    <h2 class="contactpage__form--title ms-3">{{entry.blockTitle}}</h2>
                    <div class="contactpage__form p-4">
                        {% set form = craft.freeform.form(entry.formfield.handle)  ?? null %}
                        {#
                          form.render({
                            labelClass: 'form-label',
                            inputClass: 'form-control',
                            selectClass:'form-select',
                            instructionsBelowField: true,
                            submitClass: 'submit', 
                            formAttributes: {
                              class: 'contactpage__form--content'
                            }
                          })
                        #}
                        {% if form %}
                      {{
                        form.renderTag({
                          class: 'row gx-3 gx-lg-5 gy-4 contactpage__form--content pt-4',
                          id: 'formContact',
                          formAttributes: {
                            'data-skip-html-reload': true
                          }
                        })
                      }}

                    {% if form.hasErrors %}
                      <div class="freeform-form-has-errors">
                        {{ '¡Ocurrió un error! Por favor, revise los datos ingresados e intente enviarlo de nuevo.'|t }}
                      </div>
                    {% endif %}

                        {% set groups = [
                          {
                            childrens: false,
                            field: form.get('fullName')
                          },
                           {
                            childrens: false,
                            field: form.get('email'),
                          },
                          {
                            childrens: false,
                            field: form.get('consulta')
                          },
                          {
                            childrens: false,
                            field: form.get('message')
                          }
                        ] %}
                    {% endif %}
                     {% for item in groups %}
                  {% if item.childrens %}
                    <div class="freeform-column  col-12 col-lg-12">
                      {% for children in item.items %}
                        <section class="{{ children.parentClass }}">
                          {{ _set.field(children.field) }}
                        </section>
                      {% endfor %}
                    </div>
                  {% else %}
                    <div class="freeform-column  col-12 col-lg-12">
                      {{ _set.field(item.field) }}
                    </div>
                  {% endif %}
                {% endfor %}
                <input type="hidden" value="{{ form.handle|base64enc }}" name="form_qr" /> 
                <div class="col-12 col-lg-12">
                 <div class=" d-flex justify-content-end">
                    <button type="submit" class="px-4 py-2 submit">
                      {{ 'Enviar'|t|upper }}
                    </button>
                  </div>
                </div>
                
                 {{ form.renderClosingTag }}

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