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

{% block content_css %}
{% if core.auth.recaptchaactive == 1 %}
<script src="https://www.google.com/recaptcha/api.js"></script>
{% endif %}
{% endblock %}

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

        {% if footer.address.address or footer.phones or footer.emails or footer.businessHour %}
        {{ componentInfo.grid(footer, extra.static.global.info) }}
        <hr>
        {% endif %}

        <form id="workForm" name="workForm" class="form-work" action="{{ form.action }}" method="post" role="form" enctype="multipart/form-data">
            {{ macroForms.public_key('key_work') }}
            {{ macroForms.recaptcha_key(core.auth) }}

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

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

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

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

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

                <div class="col-md-4">
                    {{ macroForms.input('social_work', labelForm.social, null, null, null, 'text', false) }}
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    {{ macroForms.input('atuation_work', labelForm.atuation, null, null, null, 'text', false) }}
                </div>
            </div>

            {{ macroForms.fileContainer('file_work', labelForm.file, 'Selecione um arquivo...', '[ Extensões permitidas: WORD - PDF - ZIP - RAR / Tamanho máximo: 20MB ]') }}

            {{ macroForms.textarea('message_work', labelForm.message, null, null, 'form-control', false) }}

            {{ macroForms.checkbox_unique('newsletter_work', extra.static.work.form.checkNewsletter) }}

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

        {% if extra.static.localization.texts.howtoget and extra.static.localization.map.lat and 1 == 2 %}
        <br>
        <h3 class="heading-macro"><i class="fa fa-map-marker"></i> {{ extra.static.localization.texts.howtoget|raw }}</h3>
        {% endif %}
    </div>
</section>
{% endblock %}

{% block content_js %}
<script>
$('.form-work').validate({
    errorElement: "span",
    errorClass: "help-block",
    focusInvalid: true,
    rules: {
        "name_work": { required: true },
        "email_work": { required: true, email: true },
        "phone_work": { required: true },
        "state_work": { required: true },
        "city_work": { required: true },
        "file_work": { required: true }
    },
    messages: {
        "name_work": { required: validate.static.work.name },
        "email_work": { required: validate.static.work.email, email: validate.static.work.email },
        "phone_work": { required: validate.static.work.phone },
        "state_work": { required: validate.static.work.state },
        "city_work": { required: validate.static.work.city },
        "file_work": { required: validate.static.work.file }
    },
    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_work').change(function() {
    var state = $(this).val();

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

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