{% extends "common/master-views.twig" %}

{% block content_page %}
{% set labelForm = extra.static.contact.label %}
<section id="{{ page.header.key }}" class="internal">
    <div class="container">
        {% if page.header.text %}
        <div class="tinymce view-page">
            {{ page.header.text|raw }}
        </div>
        <hr class="hr-sm">
        {% endif %}

        <form id="contactForm" name="contactForm" class="form-contact" action="{{ form.action }}" method="post" role="form">
            {{ macroForms.public_key('key_contact') }}
            {{ macroForms.recaptcha_key(core.auth) }}

            <div class="row">
                <div class="col-md-4">
                    {{ macroForms.input('name_contact', labelForm.name, null) }}
                </div>

                <div class="col-md-4">
                    {{ macroForms.input('email_contact', labelForm.email, null, null, null, 'email') }}
                </div>

                <div class="col-md-4">
                    {{ macroForms.input('phone_contact', labelForm.phone, null, null, 'input-mask-phone', 'tel') }}
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    {{ macroForms.select('state_contact', labelForm.state, form.state, 'Selecione um estado...') }}
                </div>

                <div class="col-md-4">
                    {{ macroForms.select('city_contact', labelForm.city, form.city, 'Selecione uma cidade...', 'Aguardando selecionar um estado...') }}
                </div>
            </div>

            {{ macroForms.textarea('message_contact', labelForm.message) }}

            {{ macroForms.checkbox_unique('newsletter_contact', extra.static.contact.form.checkNewsletter) }}

            <div class="text-left">
                {{ macroForms.button_submit('submit_contact', extra.static.contact.form.buttonLabel, extra.static.contact.form.buttonTitle, 'fa fa-fw fa-paper-plane') }}
            </div>
        </form>
    </div>
</section>
{% endblock %}

{% block content_js %}
<script>
$('.form-contact').validate({
    errorElement: "span",
    errorClass: "help-block",
    focusInvalid: true,
    rules: {
        "name_contact": { required: true },
        "email_contact": { required: true, email: true },
        "phone_contact": { required: true },
        "state_contact": { required: true },
        "city_contact": { required: true },
        "subject_contact": { required: true },
        "message_contact": { required: true }
    },
    messages: {
        "name_contact": { required: validate.static.contact.name },
        "email_contact": { required: validate.static.contact.email, email: validate.static.contact.email },
        "phone_contact": { required: validate.static.contact.phone },
        "state_contact": { required: validate.static.contact.state },
        "city_contact": { required: validate.static.contact.city },
        "subject_contact": { required: validate.static.contact.subject },
        "message_contact": { required: validate.static.contact.message }
    },
    highlight: function (e) {
        $(e).closest(".clearfix").removeClass("has-info").addClass("has-error");
    },
    success: function (e) {
        $(e).closest(".clearfix").removeClass("has-error").addClass("has-info");
        $(e).remove();
    },
    errorPlacement: function (error,element) {
        error.insertAfter(element.parent());
    }
});

$('select#state_contact').change(function() {
    var state = $(this).val();

    $('select#city_contact').empty().load(path_apis + '/getCitys.php?state='+state);
});
</script>

{{ toolsCommon.recaptcha(core.auth) }}
{% endblock %}