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

{% trans_default_domain "lesson" %}

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


{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndextrack/css/new.css') }}"/>
{% endblock %}

 {% block content %}
  <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div id="research-new"  class="col-xs-12 col-md-6 shadow">
                <center> 
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active bg-success" role="progressbar" aria-valuenow="{{ course.numberOfAddedLessons }}" aria-valuemin="0" aria-valuemax="{{ course.numberOfLessons }}">{{ course.numberOfAddedLessons }}/{{ course.numberOfLessons }}</div>
                    </div>
                </center>
                <div id="page-header" class="new-research-header">
                    <span><i class="fa fa-plus"></i>&nbsp;  {{ 'page.title.new_lesson'|trans }}</span>
                </div>
                <br>
                <form id="lesson-form" class="form-horizontal"  action="{{ path('syndex_lesson_new' , {'course_slug' : course_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': {'data-toggle':'tooltip',
                            'placeholder':'form.placeholder.Estimatedminutes'|trans,
                            'min':'0','class':'time-form'
                        }}) }}
                    </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>


                    <div id="FileName" class="form-group">
                        <label class="control-label">{{ 'form.FileName'|trans }}</label>
                        <p>
                            <input type="text" id="numberOfFile" value="{{ form.lessonFileNames|length }}" hidden>
                        </p>
                        <div id="FileName-fields-list" class="col-md-12"
                             data-prototype="{{ form_widget(form.lessonFileNames.vars.prototype)|e }}">
                            {% for FileName in form.lessonFileNames %}
                                <div class="ref" class="form-group">
                                    {{ form_widget(FileName,
                                    {'attr': {'data-toggle':'tooltip',
                                        'data-placement':'left', 'title':'FileName.title'|trans,
                                        'placeholder':'form.placeholder.FileName'|trans
                                    }}) }}
                                    {{ form_errors(FileName) }}
                                </div>
                            {% endfor %}
                        </div>
                        <a href="#" id="add-another-FileName"><i class="fa fa-plus" style="color: #00a55a"></i>&nbsp;&nbsp;{{ 'form.add.File'|trans }}</a>
                    </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 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-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>
    <script type="text/javascript">
        var numberOfAddedLessons = $(".progress-bar").attr("aria-valuenow") == ""?0:parseInt($(".progress-bar").attr("aria-valuenow"));
        var numberOfLessons =  parseInt( $(".progress-bar").attr("aria-valuemax") )
        $(".progress-bar").css("width", (numberOfAddedLessons/numberOfLessons)*100 + "%");
    </script>
{% endblock %}