{% extends 'reports/base_index.html' %}
{% load comment_filter %}
{% block title %}Все комментарии{% endblock %}
{% block head %}
    <script>
    window.load_process_interval = false;
    window.comments_stack1 = [];
    window.comments_stack2 = [];
    function get_comment_text(id) {
        var r = '';
        $.ajax({
            type: 'GET',
            url: '/courses/get_comment_text/',
            async: false,
            data: {'comment': id},
            success: function (data) {
                if (data['code'] == '1') {
                    r = data['data']
                }
            }
        });
        return r;
    }
    function load_comments_texts(){
        start_load();
        function start_load(){
            window.load_process_interval = setInterval( function(){load()}, 100);
        }
        function stop_load_process(){
            clearInterval(window.load_process_interval);
            delete window.load_process_interval;
            $('[name=preload_status]').html('Загружено')
        }
        function load(){
            var data;
            if (window.comments_stack2 && window.comments_stack2.length > 0){
                data = window.comments_stack2.pop();
                $('[name=preload_status]').html('Загрузка: ' + (window.comments_stack2.length*100/parseInt($('[name=course_length]').html(), 10)).toFixed(2) + '%');
                $('[readable_comment='+data+']').html('<iframe f_name="{{ comment.id }}" style="width: 100%; border: 0;" srcdoc="<div class=\'m-b-xs\' style=\'font-family: exo_2regular, Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;-webkit-font-smoothing: antialiased;line-height: 1.42857143;color: #58666e;background-color: transparent;\'>'+get_comment_text(data)+'</div>"></iframe>');
            } else if (window.comments_stack3 && window.comments_stack3.length > 0) {
                data = window.comments_stack1.pop();
                $('[name=preload_status]').html('Загрузка: ' + (window.comments_stack3.length*100/parseInt($('[name=course_length]').html(), 10)).toFixed(2) + '%');
                $('[readable_comment='+data+']').html('<iframe f_name="{{ comment.id }}" style="width: 100%; border: 0;" srcdoc="<div class=\'m-b-xs\' style=\'font-family: exo_2regular, Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;-webkit-font-smoothing: antialiased;line-height: 1.42857143;color: #58666e;background-color: transparent;\'>'+get_comment_text(data)+'</div>"></iframe>');
            } else if (window.comments_stack1 && window.comments_stack1.length > 0){
                data = window.comments_stack1.pop();
                $('[name=preload_status]').html('Загрузка: ' + (window.comments_stack1.length * 100 / parseInt($('[name=course_length]').html(), 10)).toFixed(2) + '%');
                $('[readable_comment=' + data + ']').html('<iframe f_name="{{ comment.id }}" style="width: 100%; border: 0;" srcdoc="<div class=\'m-b-xs\' style=\'font-family: exo_2regular, Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;-webkit-font-smoothing: antialiased;line-height: 1.42857143;color: #58666e;background-color: transparent;\'>' + get_comment_text(data) + '</div>"></iframe>');
            } else  {
                stop_load_process();
            }
        }
    }

        function comment_response(id, text, type, material) {
            $.ajax({
                type: 'POST',
                url: '/courses/sent_comment_response/',
                data: {'id': id, 'text': text, 'type': type, 'material_id': material},
                success: function (data) {
                    if (data['code'] == '0') {
                        console.log(data['response']);
                    }
                }
            });
        }
    </script>
    <style>
        .saw{
            display: none;
        }
        .no_read{
            background: #f5fce5;
            transition: 0s 9999999s;
        }
        .no_read:hover{
            background: #fff;
            transition: 1s;
        }
        .readed{
            background: #fff;
        }
    </style>
{% endblock %}
{% block content %}
    <div style="padding: 20px;">
    <div style="clear: both;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px dotted #999;">
    <h1 style="margin: 0;    margin-bottom: 20px;float: left;">Комментарии<i class="glyphicon glyphicon-align-left" style="margin-left: 10px;
    font-size: 25px;"></i></h1>
        <span name="preload_status"></span>
        <span name="course_length" style="display: none;">0</span>
    </div>
    <div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#lessons" aria-controls="lessons" role="tab" data-toggle="tab">Уроки <span style="margin-left: 5px;" class="label label-success" name="lessons_count"></span></a></li>
    <li role="presentation"><a href="#articles" aria-controls="articles" role="tab" data-toggle="tab">Статьи <span style="margin-left: 5px;" class="label label-success" name="articles_count"></span></a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="lessons">
    <div>

  <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist" name="courses_tabs">
      </ul>

      <!-- Tab panes -->
      <div class="tab-content" name="courses_content">
      </div>

    </div>
    <script>
        window.courses = new Set();
    </script>
        {% for comment in lessons %}
            <script>
                if (!window.courses.has('{{ comment.course.get_title }}')){
                    window.courses.add('{{ comment.course.get_title }}');
                    $('[name="courses_tabs"]').append('<li role="presentation"><a href="#course_{{ comment.course.id }}" aria-controls="course_{{ comment.course.id }}" role="tab" data-toggle="tab">{{ comment.course.get_title }}</a></li>')
                    $('[name="courses_content"]').append('<div role="tabpanel" class="tab-pane" id="course_{{ comment.course.id }}"></div>')
                }

            </script>
            {% if not comment.comment.saw %}
                            <div  style="padding-left: 10px;" name="comment{{ comment.comment.id }}" response="{{ comment.comment.response }}" saw="{{ comment.comment.saw }}" class="{% if comment.comment.saw %}saw{% endif %}">
                                <div style="padding: 10px;"><b>Автор:</b>  <a href="{{ DOMAIN }}admin/access/user/?q={{ comment.comment.owner_email }}" target="_blank">{{ comment.comment.owner_name }}</a>
                                <label class="label {{ comment.comment.owner_type.background }} m-l-xs">{{ comment.comment.owner_type.title }}</label>
                                    <b>[ {{ comment.comment.owner_email }} ]</b><br><b>Курс:</b> <a href="/courses/{{ comment.course.id }}" target="_blank" style="    color: #337ab7;
    border-bottom: 2px dotted;">{{ comment.course.get_title|truncatewords:2 }}</a>
                                    <b>Тема:</b><a href="/courses/{{ comment.course.id }}#theme{{ comment.theme.id }}" target="_blank" style="    color: #337ab7;
    border-bottom: 2px dotted;"> {{ comment.theme.get_title|truncatewords:2 }}</a>
                                    <b>Урок №{{ comment.lesson.sort }}:</b><a href="/courses/lesson/{{ comment.lesson.id }}?to_comment={{ comment.comment.id }}" target="_blank" style="    color: #337ab7;
    border-bottom: 2px dotted;"> {{ comment.lesson.get_title|truncatewords:2 }}</a>
                                    <span style="float: right;">
                                        {% if comment.comment.response %}
                                            <span style="cursor: pointer; padding: 5px 10px;background: green;color: #fff;border-radius: 5px;" data-toggle="tooltip" data-placement="bottom" title="Есть ответ" onclick="$('#response_result_{{ comment.comment.id }}').fadeIn('fast');"><i class="glyphicon glyphicon-ok" style="padding-right: 5px;"></i> Есть ответ</span>
                                        {% endif %}
                                    <b>Дата:</b> {{ comment.comment.date }}
                                </span>
                                </div>
                                <p style="padding: 10px;
    background: #ffc;
    border-radius: 5px;display: none;" about="{{ comment.comment.id }}"></p>

                                <div style="
        padding: 10px;
        border-radius: 5px;margin-bottom: 30px;" class="{% if comment.comment.saw %}readed{% else %}no_read{% endif %}" readable_comment="{{ comment.comment.id }}">
                                    <script>
                                        {% if comment.comment.saw %}
                                            window.comments_stack1.unshift({{ comment.comment.id }});
                                        {% else %}
                                            window.comments_stack2.unshift({{ comment.comment.id }});
                                        {% endif %}
                                    </script>
                                </div>

                            </div>
                            <script>
                                $('#course_{{ comment.course.id }}').append($('[name=comment{{ comment.comment.id }}]'))
                            </script>
            {% endif %}
                        {% empty %}
                            <script>
                                window.theme{{ comment.theme.id }} = 0;
                                $('[name=lesson{{ comment.lesson.id }}]').hide();
                            </script>
                        {% endfor %}
    <script>
        if (window.comments_stack2){
            $('[name=lessons_count]').html(window.comments_stack2.length)
        } else {
            $('[name=lessons_count]').html(0)
        }
        $('[name=course_length]').html(window.comments_stack2.length + window.comments_stack1.length)
    </script>
    </div>

    <div role="tabpanel" class="tab-pane" id="articles">
        {% for comment in articles %}
                            <div  style="padding-left: 10px;" name="comment{{ comment.comment.id }}" response="{{ comment.comment.response }}" saw="{{ comment.comment.saw }}" class="{% if comment.comment.saw %}saw{% endif %}">
                                <div style="padding: 10px;"><b>Автор:</b>  <a href="{{ DOMAIN }}admin/access/user/?q={{ comment.comment.owner_email }}" target="_blank">{{ comment.comment.owner_name }}</a>
                                <label class="label {{ comment.comment.owner_type.background }} m-l-xs">{{ comment.comment.owner_type.title }}</label>
                                    <b>[ {{ comment.comment.owner_email }} ]</b>
                                    <br><b>Статья:</b><a href="/library/article/{{ comment.article.id }}" target="_blank" style="    color: #337ab7;
    border-bottom: 2px dotted;"> {{ comment.article.title }}</a>
                                    <span style="float: right;">
                                        {% if comment.comment.response %}
                                            <span style="cursor: pointer; padding: 5px 10px;background: green;color: #fff;border-radius: 5px;" data-toggle="tooltip" data-placement="bottom" title="Есть ответ" onclick="$('#response_result_{{ comment.comment.id }}').fadeIn('fast');"><i class="glyphicon glyphicon-ok" style="padding-right: 5px;"></i> Есть ответ</span>
                                        {% endif %}

                                    <b>Дата:</b> {{ comment.comment.date }}
                                </span>
                                </div>
                                <p style="padding: 10px;
    background: #ffc;
    border-radius: 5px;display: none;" about="{{ comment.comment.id }}"></p>


                                <div style="
        padding: 10px;
        border-radius: 5px;margin-bottom: 30px;" class="{% if comment.comment.saw %}readed{% else %}no_read{% endif %}" readable_comment="{{ comment.comment.id }}">
                                    <script>
                                        {% if comment.comment.saw %}
                                            window.comments_stack1.unshift({{ comment.comment.id }});
                                        {% else %}
                                            window.comments_stack2.unshift({{ comment.comment.id }});
                                        {% endif %}
                                    </script>
                                </div>

                            </div>
                        {% empty %}
                            <script>
                                window.theme{{ comment.theme.id }} = 0;
                                $('[name=lesson{{ comment.lesson.id }}]').hide();
                            </script>
                        {% endfor %}
    <script>
        if (window.comments_stack3){
            $('[name=articles_count]').html(window.comments_stack3.length)
        } else {
            $('[name=articles_count]').html(0)
        }
    </script>
    </div>
  </div>
    </div>
    </div>
{% endblock %}
{% block js %}
    <script src="/static/js/apis/comments.js"></script>
    <script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
        load_comments_texts()
    })
    </script>
{% endblock %}