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

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

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

{% block content %}
     <div class="container">
        {% if message %}
                <div class="alert alert-danger" role="alert">
                {{message}}
            </div>
        {% endif %}
        <div class="row">
            <div class="col-md-3"></div>
            <div  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.edit'|trans }}</span>
                </div>
                <br>

                 <form id="track-form" class="form-horizontal" action="{{ path('syndex_one_track_edit' , {'slug' : course.slug  }) }}"   name="new_lesson" method="POST" novalidate enctype="multipart/form-data">
                     {{form_row(form.course_token)}}
                     
                     <div class="form-group">
                        <label class="control-label">{{ 'track.fields'|trans }}</label>
                        {{ form_errors(form.fields) }}
                        {{ form_widget(form.fields,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.fields'|trans} }) }}
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label">{{ 'track.title'|trans }}</label>
                        {{ form_errors(form.title) }}
                        {{ form_widget(form.title,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.title'|trans} }) }}
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label">{{ 'track.description'|trans }}</label>
                        {{ form_errors(form.description) }}
                        {{ form_widget(form.description,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'track.description'|trans} }) }}
                    </div>

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

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

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

        </div>
    </div>
{% endblock %}

{% block javascripts %}       
    {{ parent() }}
        
    <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();
            document.getElementById('course_numberOfLessons').value = {{ course.numberOfLessons }};
        });

        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).on('keyup', '[id$=email]', function (e) {
            $(this).autocomplete({
                source: Routing.generate('shamra_academia_user_autoComplete'),
                minLength: 8
            });
        });
        $("#course_fields").select2({width:'100%'}); 
    </script>
{% endblock %}