{% extends "::base.html.twig" %}


{% block model_header %}
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h3 class="modal-title" id="modalBoxLabel">{{ 'home.titles.Ask Question'|trans }}</h3>
    </div>
{% endblock %}

{% block content_header %}{% endblock %}
{% block content %}

<div class="modal-body">
    {{ form_start(form, {'attr': { 'data-submittype':'modal-ajax', 'novalidate': 'novalidate' }}) }}

        <div class="form-group">{{ form_errors(form) }}</div>

        <div class="form-group clearfix">
            <span>{{ form_errors(form.category) }}</span>
            <div class="col-xs-6">
            {{ form_widget(form.category) }}
            </div>
            <div class="col-xs-6"><small class="color-green">{{ 'form.titles.optional'|trans }}</small></div>
        </div>

        <div class="form-group clearfix">
            <span>{{ form_errors(form.questionTitle) }}</span>
            <div class="col-xs-11">
                {{ form_widget(form.questionTitle, {'attr': { 'placeholder': 'form.titles.question title' } }) }}
            </div>
            <div class="col-xs-1"><small class="color-green">{{ 'form.titles.optional'|trans }}</small></div>
        </div>

        <div class="form-group clearfix">
            <span>{{ form_errors(form.questionTitle) }}</span>
            <div class="col-xs-12">
                {{ form_widget(form.question, {'attr':{ 'style':'height:200px!important;', 'row':30, 'placeholder': 'form.titles.question', 'data-required': 'required' }}) }}
            </div>
        </div>

        <div class="form-group clearfix">
            <div class="col-xs-12">
                <button type="submit" class="btn rounded-corners bg-green color-white pull-left">{{ 'form.titles.send question'|trans }}</button>
            </div>
        </div>

    {{ form_end(form) }}

    <script>
        $(function () {
                $('[data-required]').each(
                        function () {

                            $form = $(this).closest('form');
                            $formSubmit = $form.find('[type="submit"]');

                            $(this).on('change paste keyup', function () {

                                        var emptyFields = $form.find('[data-required]').filter(function() { return $(this).val().trim() == ''; });
                                        if(emptyFields.length){
                                            $formSubmit.prop('disabled', true);
                                        }else {
                                            $formSubmit.prop('disabled', false);
                                        }

                                    }
                            ).trigger('change');
                        }
                );
           }());
    </script>

</div>



{% endblock content %}

{% block model_footer %}  {% endblock %}