{% extends '@syndexAcademic/main_layout.html.twig' %}

{% block title %}
    {{ 'سؤال جديد' }}
{% endblock %}
{% block css %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/new-research.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/tagmanager.css') }}" />
{% endblock %}
{% block body %}
    {{ parent() }}
    <div class="container">
        <div class="col-md-3"></div>
        <div id="academia-new-question" class="col-md-6 col-xs-12">
            <div id="page-header" class="new-research-header">
                <span><i class="fa fa-plus"></i>&nbsp; {{ 'سؤال جديد' }}</span>
            </div>
            <br>
            <form id="shamra_academia_question" class="form-horizontal" method="post" action="{{ path('shamra_academia_ask_question',{'username':app.request.get('username')}) }}" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="shamra_academia_question_question" class="control-label">* {{ 'اكتب سؤالك ' }}</label>
                    {{ form_errors(form.question) }}
                    <p class="profile-error" hidden></p>
                    {{ form_widget(form.question) }}
                </div>
                 <div class="form-group">
                    <label class="control-label">{{ 'أضف شرحا لمضمون السؤال' }}</label>
                    {{ form_errors(form.explanation) }}
                    <div id="q-editor" style="min-height:250px; padding-bottom:33px;"></div>
                    {{ form_widget(form.explanation,{'attr':{'style':'display:none'}}) }}
                </div>
                <div class="form-group">
                    <label for="shamra_academia_question_field" class="control-label"> {{ 'أدخل مجال السؤال' }}</label>
                    {{ form_errors(form.field) }}
                    <p class="profile-error" hidden></p>
                    {{ form_widget(form.field) }}
                </div>

                <div id="tags-div" class="form-group">
                    <label for="tag-value" class="control-label">{{ 'كلمات مفتاحية' }}</label>
                    {{ form_widget(form.interests) }}
                    {{ form_errors(form.interests) }}
                    <div class="row">
                        <div class="col-md-4">
                            <input id="tag-value" type="text" name="tags" size="35" class="tm-input form-control" style="width:100%"/>
                        </div>
                        <div class="col-md-4">
                            <input id="push-tag" type="button" value="{{ 'أدخل' }}" class="btn"/>
                        </div>
                    </div>
                </div>
                
                {% if form.reCaptcha is defined %}
                    <div class="form-group">
                        {{ form_errors(form.reCaptcha) }}
                        {{ form_widget(form.reCaptcha,
                            {'attr': {'data-toggle':'reCaptcha',
                                'data-type':'checkbox',
                            }}) }}
                    </div>
                {% endif %}
                <div class="button-placeholder">
                    <input id="questionSubmit" class="btn submit-button" type="submit" value="{{ 'إرسال' }}" />
                </div>
                {{ form_widget(form.question_token) }}
            </form>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onGoogleReCaptchaApiLoad&render=explicit&hl={{app.request.locale}}" async defer></script>
    <script src="{{ asset('bundles/syndexacademic/js/questionValidation.js') }}"></script>
    <script src="{{ asset('bundles/syndexacademic/js/tagmanager.js') }}" ></script>

    <script>
        $(document).ready(function () {
            // Processing and rendering tags.
            {% for tag in question.interests %}
            jQuery(".tm-input").tagsManager('pushTag', '{{ tag.context }}');
            {% endfor %}
            var lastentry = "";
            $('.ui-helper-hidden-accessible').hide();
        });

        jQuery(".tm-input").tagsManager();
        $("input[name=hiddenTagListA]").change(function () {
            $("#shamra_academia_question_interests").val($("input[name=hiddenTagListA]").val());
        });
        // Applying jQuery plugin - Autocomplete
        function processTags(tags){
            var r=[];
            //var t = JSON.parse(tags)
            for(var i in tags){
                r.push(tags[i].context)
            }
            return r
        }
        $(".tm-input").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: Routing.generate('shamra_academia_get_tag_suggestions'),
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        response( processTags(data) );
                    }
                });
            },
                //data :: JSON list defined
                //processTags(Routing.generate('shamra_academia_get_tag_suggestions')),
            minLength: 1
        });
        $('#push-tag').click(function () {
            jQuery(".tm-input").tagsManager('pushTag', $('#tag-value').val());
        });
        // Applying jQuery plugin - Autocomplete
        $(document).on('keyup', '[id$=email]', function (e) {
            $(this).autocomplete({
                source: Routing.generate('shamra_academia_user_autoComplete'),
                minLength: 8
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#shamra_academia_question_relatedResearch').select2({width:'100%'})
            $("#shamra_academia_question_field").select2({width:'100%'});
            $('#shamra_academia_question_linkedResearch').change(function () {
                if($(this).is(':checked')){
                    $('#relatedResearchList').prop('hidden',false)
                }
                else{
                    $('#relatedResearchList').prop('hidden',true)
                }
            })
            $('.ql-editor').html($('#shamra_academia_question_explanation').val())

        })
    </script>

    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script>
        $(document).ready(function () {
            const editor = new Quill('#q-editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ header: [1, 2, 3, 4] }],                       // custom button values
                        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        ['link','blockquote', 'code-block', 'image'],
                        [{ 'direction': 'rtl' }],                         // text direction
                        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                        [{ 'align': [] }],
                        ['clean'],
                    ]
                },
            });
            editor.format('direction', 'ltr');
            editor.format('align', 'left');

            $('#shamra_academia_question').submit(function (e) {
                $('#shamra_academia_question_explanation').val(
                    $("#q-editor .ql-editor").html()
                );
                return true;
            });
        });
    </script>
{% endblock %}