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

{% block content_page %}
{% set labelForm = extra.static.budget.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>
        {% endif %}

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

            <div class="row">
                <div class="col-md-4">
                    {{ macroForms.select('solution_budget', labelForm.solution, form.solutions, 'Selecione uma solução...') }}
                </div>
            </div>

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

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

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

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

            {{ macroForms.checkbox_unique('newsletter_budget', extra.static.budget.form.checkNewsletter) }}

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

{% block content_js %}
<script>
$('.form-budget').validate({
    errorElement: "span",
    errorClass: "help-block",
    focusInvalid: true,
    rules: {
        "solution_budget": { required: true },
        "name_budget": { required: true },
        "email_budget": { required: true, email: true },
        "phone_budget": { required: true },
        "state_budget": { required: true },
        "message_budget": { required: true }
    },
    messages: {
        "solution_budget": { required: validate.static.budget.solution },
        "name_budget": { required: validate.static.budget.name },
        "email_budget": { required: validate.static.budget.email, email: validate.static.budget.email },
        "phone_budget": { required: validate.static.budget.phone },
        "state_budget": { required: validate.static.budget.state },
        "message_budget": { required: validate.static.budget.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());
    }
});
</script>

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