{% extends '@syndexTrack/Default/form.html.twig' %}

{% block title %} {{ 'page.title.new'|trans }} {% endblock %} 
{% trans_default_domain "track" %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}


{% block content %}
     <div class="container">
        {% if imageError %}
            <div class="alert alert-danger  alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{imageError|trans}}
            </div>
        {% endif %}
        <div class="row">
            <div class="col-md-3"></div>
            <div id="research-new" class="col-xs-12 col-md-6 shadow">
                <div id="page-header" class="new-research-header">
                    <span><i class="fa fa-plus"></i>&nbsp; {{ 'page.title.new'|trans }}</span>
                </div>
                <br>

                {{ form_start(form, {'action': path('syndex_track'), 'method': 'POST' , 'attr':{'id':'track-form' ,'novalidate':true} }) }}
                    <div class="form-group">
                        <label class="control-label">{{ 'track.fields'|trans }}</label>
                        {{ form_widget(form.fields,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.fields'|trans} }) }}
                        {{ form_errors(form.fields) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'track.title'|trans }}</label>
                        {{ form_widget(form.title,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.title'|trans} }) }}
                        {{ form_errors(form.title) }}
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label">{{ 'track.description'|trans }}</label>
                        {{ form_widget(form.description,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.description'|trans} }) }}
                        {{ form_errors(form.description) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'track.prerequest'|trans }}</label>
                        {{ form_widget(form.prerequest,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.prerequest'|trans} }) }}
                        {{ form_errors(form.prerequest) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'track.numberOfLessons'|trans }}</label>
                        {{ form_widget(form.numberOfLessons,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.numberOfLessons'|trans} }) }}
                        {{ form_errors(form.numberOfLessons) }}
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label">{{ 'track.shortDescription'|trans }}</label>
                        {{ form_widget(form.shortDescription,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.shortDescription'|trans} }) }}
                        {{ form_errors(form.shortDescription) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'track.teacherBio'|trans }}</label>
                        {{ form_widget(form.teacherBio,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.teacherBio'|trans} }) }}
                        {{ form_errors(form.teacherBio) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'track.teacherLinkedinLink'|trans }} <span style="color:#999; font-size:12px;">({{ 'track.teacherBioBarracket'|trans }})</span> </label>
                        {{ form_widget(form.url,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.teacherLinkedinLink'|trans} }) }}
                        {{ form_errors(form.url) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'track.video'|trans }} <span style="color:#999; font-size:12px;">({{ 'track.videoBarracket'|trans }})</span> </label>
                        {{ form_widget(form.video,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.video'|trans} }) }}
                        {{ form_errors(form.video) }}
                    </div>

                    <div class="form-group">
                        <div class="form-group col-md-10 col-sm-10 col-xs-10">
                            <label class="control-label">{{ 'track.imageCover'|trans }}</label>
                            {{ form_widget(form.imageCover) }}
                            {{ form_errors(form.imageCover) }}
                        </div>
                        <div class="col-sm-6 col-xs-12">
                        </div>
                    </div>

                    <div id="tags-div" class="form-group">
                        <label class="control-label">{{ 'track.tags'|trans }}</label>
                        {{ form_widget(form.tags) }}
                        {{ form_errors(form.tags) }}
                        <div class="row">
                            <div class="col-md-4">
                                <input id="tag-value" type="text" name="tags" size="35" class="tm-input form-control"/>
                            </div>
                            <div class="col-md-4">
                                <input id="push-tag" type="button" value="{{ 'form.add.tag'|trans }}" class="btn"/>
                            </div>
                        </div>

                    </div>

                    {% if form.reCaptcha is defined %}
                           <div class="form-group">
                            {{ form_widget(form.reCaptcha,
                                 {'attr': {'data-toggle':'reCaptcha',
                                    'data-type':'checkbox',
                                }}) }}
                            </div>
                            {{form_errors(form)}}
                    {% endif %}

                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="button-placeholder">
                            {{ form_widget(form.save) }}
                        </div>
                    </div>

                {{ form_end(form) }}
            </div>

        </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/syndextrack/js/new-track.js') }}" ></script>
    {# I need to keep these snippts of JavaScript here because I need some data from returned entities. #}
    <script>
        $(document).ready(function () {
            // Processing and rendering tags.
            {% for tag in course.tags %}
            jQuery(".tm-input").tagsManager('pushTag', '{{ tag.context }}');
            {% endfor %}

            $('#shamra_academia_research_arabicFullTitle').keyup(function () {
                $('#similar-researches-div').show();
            });

            var lastentry = "";
            $('.ui-helper-hidden-accessible').hide();
        });

        jQuery(".tm-input").tagsManager();
        $("input[name=hiddenTagListA]").change(function () {
            $("#course_tags").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());
        });
        // Document upload processing...
        $(":file").filestyle({
            buttonText: "&nbsp;استعراض",
            size: "nr",
            iconName: "glyphicon glyphicon-inbox",
            buttonBefore: true,
            badge: true,
            placeholder: "لم يتم اختيار ملف بـعد"
        });
        // Applying jQuery plugin - Autocomplete
        $(document).on('keyup', '[id$=email]', function (e) {
            $(this).autocomplete({
                source: Routing.generate('shamra_academia_user_autoComplete'),
                minLength: 8
            });
        });
        $("#course_fields").select2({width:'100%'});
    </script>
{% endblock %}