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

{% trans_default_domain "lesson" %}

{% block title %}
 {{ 'page.title.edit_lesson'|trans }}
{% endblock %} 

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

 {% block content %}
  <div class="container">
        {% if message is defined %}
            <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_lesson'|trans }}</span>
                </div>
                <br>
                <form id="lesson-form" class="form-horizontal" action="{{ path('syndex_lesson_edit' , {'course_slug' : course_slug , 'slug' : lesson.slug }) }}"   name="new_lesson" method="POST" novalidate enctype="multipart/form-data">
                     {{form_row(form.lesson_token)}}

                     <div class="form-group">
                        <label class="control-label">{{ 'form.Title'|trans }}</label>
                        {{ form_errors(form.Title) }}
                        {{ form_widget(form.Title) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'form.Description'|trans }}</label>
                        {{ form_errors(form.Description) }}
                        {{ form_widget(form.Description) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'form.Estimatedminutes'|trans }}</label>
                        {{ form_errors(form.Estimatedminutes) }}
                        {{ form_widget(form.Estimatedminutes,
                        {'attr': {'dir':'ltr', 'data-toggle':'tooltip',
                            'placeholder':'form.placeholder.Estimatedminutes'|trans,
                            'min':'0'
                        }}) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'form.Richtext'|trans }}&nbsp;(اختياري)</label>
                        {{ form_errors(form.Richtext) }}
                        {{ form_widget(form.Richtext,
                        {'attr': {'dir':'ltr', 'data-toggle':'tooltip', 'style': 'display: none',
                            'placeholder':'form.placeholder.Richtext'|trans
                        }}) }}
                        <div id="q-editor" style="min-height:250px; padding-bottom:33px;"></div>
                     </div>

                    <div  id="tags-div" class="form-group">
                        <label class="control-label">{{ 'form.tags.name'|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 scroller"/>
                            </div>
                            <div class="col-md-4">
                                <input id="push-tag" type="button" value="{{ 'form.tags.add'|trans }}" 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>
                        {{form_errors(form)}}               
                    {% endif %}
                  
                     <div class="row">
                        <div class="col-md-4"></div>
                        <div class="button-placeholder">
                            <input type="submit" id="new-lesson-submit"  value="{{ 'form.submit'|trans }}" class="btn submit-button"/>
                        </div>
                    </div>
            </form>
        </div>
    </div>
</div>
 {% endblock %}


{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('bundles/syndextrack/js/new-lesson.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 lesson.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 () {
            $("#lesson_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
            });
        });
    </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');
            $("#q-editor .ql-editor").html(
                $('#lesson_Richtext').val()
            );
            $('#lesson-form').submit(function (e) {
                $('#lesson_Richtext').val(
                    $("#q-editor .ql-editor").html()
                );
                return true;
            });
        });
    </script>
 
{% endblock %}