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

{% trans_default_domain "lesson" %}

{% block title %}
 {{ 'page.title.index'|trans }} {{number}} - {{lesson.title}} - {{course.title}}
{% endblock %} 

{% set img = asset('uploads/lesson/') %}


{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndextrack/css/index.css?v1.2') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/profile.css') }}"/>
    <link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
{% endblock %}

 {% block content %}
    <div class="container">
        <div class="row">
            <div id="lesson" class="col-xs-12 col-md-9">

                 <h3 style="">{{course.title}} </h3>
                <div id="page-header" class="new-research-header" style="padding-bottom:10px;">
                    <span >{{ 'page.title.index'|trans }} {{number}} </span>
                    {% if lesson.createdBy == app.user  %}
                        <button class="btn btn-success" style="float:left; margin-right:10px;">
                            <a href="{{path('syndex_lesson_edit' , {'course_slug' : course_slug , 'slug' : lesson.slug})}}"> {{ 'index.lesson.edit'|trans }} </a>
                        </button>
                        {# {% if course.status != "accepted"  %}
                            <button class="btn btn-danger"  style="float:left;">
                                <a href="{{path('syndex_lesson_delete' , {'course_slug' : course_slug ,'slug' : lesson.slug})}}">{{ 'index.lesson.delete'|trans }} </a>
                            </button>
                        {% endif %} #}
                    {% endif %}
                     <div class="lesson-description">
                        <span style="color:#888; font-size:14px;">{{lesson.description}}</span>
                    </div>
                </div>
            
                <div id="page-body">
                    <div class="section-head"><h1>{{lesson.title}}</h1></div>
                    <div class="info-section tags ">
                    <div class="">
                        {% for tag in lesson.tags %}
                            <span class="research-keyword">
                                <a href="{{ path('syndex_all_tracks', {'tags': tag.context}) }}">{{ tag.context }}</a>
                            </span>
                        {% endfor %}
                    </div>
                
                    <div id="rich-text">
                        {{lesson.richText}}
                    </div>
                </div>

                    <div id="content">
                        <div class="profile-research-info-card">
                            
                            <ul class="profile-research-card-header" >
                                {% if videos|length > 0 %}
                                    <li class="active research-tab three-tabs" >
                                        <a class="researches-tabs" data-toggle="tab" href="#videos">{{ 'index.lesson.videos'|trans }}</a>
                                    </li>
                                {% endif %}
                                {% if files|length > 0 %}
                                    <li class="research-tab three-tabs" >
                                        <a  class="researches-tabs" data-toggle="tab" href="#files">{{ 'index.lesson.files'|trans }}</a>
                                    </li>
                                {% endif %}
                                {% if images|length > 0 %}
                                    <li class="research-tab three-tabs" >
                                        <a class="researches-tabs" data-toggle="tab" href="#images">{{ 'index.lesson.images'|trans }}</a>
                                    </li>
                                {% endif %}
                            </ul>

                            <div class="tab-content">
                                   {% if videos|length > 0 %}
                                        <div id="videos" class="researches-list scroller tab-pane fade in active shadow">
                                            {% set counter = 1 %}
                                            {% for video in videos %}
                                                <a href="{{img}}{{lesson.slug}}/{{video.lessonFileName}}">{{video.lessonFileName}}</a></br>
                                                <lable class="section-head"> {{ 'index.all.files'|trans }} </lable>
                                                <p>{{video.description}}</p>
                                                {% set counter = counter + 1 %}
                                            {% endfor %}
                                         </div>
                                    {% endif %}
                                    {% if files|length > 0 %}
                                        <div id="files" class="researches-list scroller tab-pane fade shadow">
                                            {% for file in files %}
                                                <a href="{{img}}{{lesson.slug}}/{{file.lessonFileName}}">{{file.lessonFileName}}</a></br>
                                                <lable class="section-head"> {{ 'index.all.files'|trans }} </lable>
                                                <p>{{file.description}}</p>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    {% if images|length > 0%}
                                        <div id="images" class="researches-list scroller tab-pane fade shadow">
                                            {% for image in images %}
                                                <a href="{{img}}{{lesson.slug}}/{{image.lessonFileName}}">{{image.lessonFileName}}</a>
                                                {% if app.user == lesson.createdBy %}
                                                    <a href="{{ path('syndex_remove_file' , {'FileId':image.id , 'slug':lesson.slug , 'course_slug':course_slug}) }}" style="color:red;font-size:20px;float:left" class="fa ">  &#xf014; </a>
                                                {% endif %}
                                                </br>
                                                <lable class="section-head"> {{ 'index.all.files'|trans }} </lable>
                                                <p>{{image.description}}</p>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                            </div>

                            <div class="row">
                                <div class="next">
                                    {% if next != null %}
                                        <a href="{{path('syndex_lesson_index' , {'course_slug':course.slug ,  'slug':next.slug})}}">
                                            <i class="fa fa-arrow-right"></i>
                                            {{'الدرس التالي '}} - {{next.title}}
                                        </a>
                                    {% endif %}
                                </div>
                                <div class="previous">
                                    {% if previous != null %}
                                        <a href="{{path('syndex_lesson_index' , {'course_slug':course.slug ,  'slug':previous.slug})}}">
                                            {{'الدرس السابق '}} - {{previous.title}}
                                            <i class="fa fa-arrow-left"></i>
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                            <br>
                            {% if app.user == lesson.createdBy %}
                                <h2 class="section-head"> أضف ملف جديد{#{{ 'index.all.files'|trans }}#} </h2>
                                <form id="lesson-form" class="form-horizontal" action="{{ path('syndex_add_file' , {'course_slug' : course_slug , 'slug' : lesson.slug }) }}"   name="new_lesson" method="POST" novalidate enctype="multipart/form-data">
                                    <div id="FileName-fields-list" class="col-md-12">
                                        <div class="ref">
                                            <div id="lesson_lessonFileNames_0" data-toggle="tooltip" data-placement="left" title="" placeholder="form.placeholder.FileName" data-original-title="FileName.title">
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label required" for="lesson_lessonFileNames_0_lessonFileName">اختر الملف</label>
                                                    <div class="col-sm-10">
                                                        <input type="file" id="lesson_lessonFileNames_0_lessonFileName" name="file" required="required" accept="application/pdf, video/*, application/vnd.openxmlformats-officedocument.wordprocessingml.document , application/ppt, application/pptx , image/* , application/octet-stream" tabindex="-1" style="position: absolute; clip: rect(0px, 0px, 0px, 0px);">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                <label class="col-sm-2 control-label required" for="lesson_lessonFileNames_0_Description">وصف عن الملف</label>
                                                <div class="col-sm-10">
                                                    <textarea id="lesson_lessonFileNames_0_Description" name="description" required="required" class="form-control"></textarea>
                                                </div>
                                            </div>
                                        </div>  
                                    </div>
                                    <input type="submit" name="submit" value="أدخل" class="btn" style="color: #fff;background-color: #00a550;"> 
                                </form>
                            {% endif %}
                        </div>
                    </div>

                </div>
            </div>

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


{% block javascripts %}
    <script>
        hljs.highlightAll();
    </script>
    {{ parent() }}
    <script>
        $(":file").filestyle({
            buttonText: "&nbsp;استعراض",
            size: "nr",
            iconName: "glyphicon glyphicon-inbox",
            buttonBefore: true,
            badge: true,
            placeholder: "لم يتم اختيار ملف بـعد"
        });
        
        jQuery(document).ready(function () {
            var tem = $("#rich-text").text();
            $("#rich-text").html(tem);

            $("pre").each( function() {
                this.style.direction = "ltr";
            } );
        })
    </script>
{% endblock %}