{% extends 'base.html' %}

{% load filters %}

{% block title %}{{ task.name }}{% endblock %}

{% block styles %}
    input[type="file"] {
        display: none;
    }
{% endblock %}

{% block onload %}doPoll(){% endblock %}

{% block links %}
<script>
    var current_solution = null;
</script>
{% endblock %}

{% block scripts %}
    function partyhard() {
        var elem = document.getElementById('paint');
        elem.hidden = false;
    }
    function uploaded() {
        document.getElementById('is_uploaded').style.display = 'block';
        document.getElementById('is_uploaded').nodeValue = document.getElementById('file-upload').nodeValue;
    }
    function doPoll() {
        jQuery.get('/solutions_table?id={{ task.id }}', function(data) {
            if (data == 'done') {
                return
            }
            else {
                document.getElementById('solutions').innerHTML = data;
                if (current_solution != null) {
                    {% if can_edit %}
                    document.getElementById('log').innerHTML = document.getElementById('log_' + current_solution).innerHTML;
                    {% endif %}
                    document.getElementById('details').innerHTML = document.getElementById('details_' + current_solution).innerHTML;
                }
                setTimeout(function() {doPoll()}, 2000);
            }
        })
        jQuery.get('/solutions_table?id={{ task.id }}&render=true', function(data) {
            document.getElementById('solutions').innerHTML = data;
            if (current_solution != null) {
                {% if can_edit %}
                document.getElementById('log').innerHTML = document.getElementById('log_' + current_solution).innerHTML;
                {% endif %}
                document.getElementById('details').innerHTML = document.getElementById('details_' + current_solution).innerHTML;
            }
        })
    }
    {% if can_edit %}
        function showHideTests(id) {
            var text = document.getElementById('tests_text_' + id);
            var button = document.getElementById('tests_button_' + id);
            text.hidden = !text.hidden;
            if (text.hidden) {
                button.textContent = 'Показать тесты';
            } else {
                button.textContent = 'Скрыть тесты';
            }
        }
        function showHideLog(id) {
            var text = document.getElementById('log_text_' + id);
            var button = document.getElementById('log_button_' + id);
            text.hidden = !text.hidden;
            if (text.hidden) {
                button.textContent = 'Показать лог';
            } else {
                button.textContent = 'Скрыть лог';
            }
        }
    {% endif %}
    {% if task.show_details or can_edit %}
        function showData(id) {
            current_solution = id;
            const dataTypes = ['details'{% if can_edit %}, 'tests', 'log'{% endif %}];
            for (const dt of dataTypes) {
                document.getElementById(dt).innerHTML = document.getElementById(dt + '_' + id).innerHTML;
            }
            document.getElementById('resultModalLongTitle').innerHTML = 'Подробная информация о тестировании ' + id;
        }
    {% endif %}
{% endblock %}

{% block content %}
        <!--
            Помогите! Меня взяли в заложники и заставляют писать на Python!!!
            Я уже пятый день сижу в подвале и прикручиваю Docker, избавьте меня от мучений и спасите!
        -->
        <h5>
            <a href="/block?id={{ task.block.id }}">Обратно к блоку</a>
        </h5>
        <h2>
            {{ task.name }} 
            {% if can_edit %}
                <a style="color: black;" href="/admin/task?id={{ task.id }}"><i class="fa fa-pencil"></i></a>
            {% endif %}
            <a style="color: black;" href="" data-toggle="modal" data-target="#messageModal"><!--i class="fa fa-comment"></i--></a>
        </h2>
        <div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="messageModalLabel">Написать сообщение преподавателям</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <form method="POST">
                    {% csrf_token %}
                    <div class="modal-body">
                        <textarea name="message" rows="10" cols="50" style="resize: none;"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                        <button type="submit" class="btn btn-primary">Отправить</button>
                    </div>
                </form>
              </div>
            </div>
          </div>
        <hr>
        <div class="row">
            <div class="col-9">
                <h3>Легенда</h3>
                {% autoescape off %}
                    {{ task.legend }}
                {% endautoescape %}
                <hr>
                <h3>Формат входных данных</h3>
                    {% autoescape off %}

                    {{ task.input }}
                    {% endautoescape %}

                <hr>
                <h3>Формат выходных данных</h3>
                    {% autoescape off %}

                    {{ task.output }}
                    {% endautoescape %}

                <hr>
                <h3>Спецификации</h3>
                    {% autoescape off %}

                    {{ task.specifications }}
                    {% endautoescape %}
            </div>
            <div class="col"></div>
            <div class="col-2">
                <h5>Таски</h5>
                <table>
                {% for t in task.block.tasks %}
                    <tr>
                    {% with mark=t|mark_for_task:user %}
                        {% if mark|marked %}
                            <td>
                            <div style="margin-left: 20px; border: 1px solid black; background: {{ mark|mark_color }}; width: 25px; text-align: center;">
                                {{ mark }}
                            </div>
                            </td>
                        {% endif %}
                    {% endwith %}
                    <td>
                    <a href="/task?id={{ t.id }}">{% if t.id == task.id %}<b>{{ t.name }}</b>{% else %}{{ t.name }}{% endif %}</a><br>
                    </td>
                    </tr>
                {% endfor %}
                </table>
            </div>
        </div>
        <hr>
        <h3>Самплы</h3>
            {% for sample in task.samples %}
                <h5>Пример {{ sample.input.num }}</h5><br>
                <b>
                    <table style="width: 100%">
                        <tr>
                            <td>
                                Входные данные
                            </td>
                            <td>
                                Выходные данные
                            </td>
                        </tr>
                    </table>
                </b>
                <hr>
                <table style="width: 100%;">
                    <tr>
                        <td style="width: 50%; vertical-align: top;">
<pre>
{{ sample.input.text }}
</pre>
                        </td>
                        <td style="width: 50%; vertical-align: top;">
<pre>
{{ sample.output.text }}
</pre>
                        </td>
                    </tr>
                </table>
                <hr>
            {% endfor %}
        <hr>
        {% if can_send or can_edit %}
            <h2>Отправить решение</h2>
            <form action="" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <label for="file-upload" class="btn btn-dark" style="margin-top: 20px;">
                    <i class="fa fa-upload"></i> Загрузить файл
                </label>
                <span id="is_uploaded" style="display: none;">Решение загружено</span>
                <input type="file" class="btn form-control-file" id="file-upload" value="Выбрать файл" name="file" onchange="uploaded()">
                <br><button type="submit" value="Отправить" class="btn btn-outline-dark"><i class="fa fa-share"></i> Отправить</button>
            </form>
        {% endif %}
        {% if not can_edit and can_send %}
        Осталось попыток: {{ user|last_attempts:task }}
        {% endif %}

{% if can_edit or task.show_details %}
         <!-- Modal -->
         <div class="modal fade" id="resultModalLong" tabindex="-1" role="dialog" aria-labelledby="resultModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="resultModalLongTitle">Подробная информация о тестировании</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="container-fluid">
                      <div class="row">
                          <div class="col-12">
{% autoescape off %}
<div id="details"></div>
{% endautoescape %}
{% if can_edit %}
<hr>
<pre id="tests_text_{{ solution.id }}" hidden>
<h4>Тесты</h4><br>
<div id="tests"></div>
</pre>
<hr>
<pre id="log_text_{{ solution.id }}" hidden>
<h4>Лог</h4><br>
<div id="log"></div>
</pre>
{% endif %}
                          </div>
                      </div>
                  </div>
                </div>
                <div class="modal-footer">
                  {% if can_edit %}
                  <button type="button" id="log_button_{{ solution.id }}" class="btn btn-warning" onclick="showHideLog('{{ solution.id }}')">Показать лог</button>
                  <button type="button" id="tests_button_{{ solution.id }}" class="btn btn-primary" onclick="showHideTests('{{ solution.id }}')">Показать тесты</button>
                  {% endif %}
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
{% endif %}
        <h2 style="margin-top: 20px;">Решения</h2>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">id</th>
                    <th scope="col">Дата и время отправки</th>
                    <th scope="col">Результат</th>
                    <th scope="col">Оценка</th>
                    <th scope="col">Комментарий</th>
                </tr>
            </thead>
            <tbody id="solutions">
                
            </tbody>
        </table>
        <iframe id="paint" src="https://jspaint.app/" style="width: 100%; height: 1000px;" hidden></iframe>

{% endblock %}