{% extends 'base.html' %}
{% load static %}
{% block head %}
{% load js %}
<link rel="stylesheet" href="{% static 'css/projects/project_page.css' %}">
<title>{{ project.name }}</title>

{% if user.role == 'Ученик' %}
<style>
    .name-form,
    .descr-form {
        width: calc(100% - 50px);
    }
</style>
{% endif %}

{% endblock head %}

{% block content %}
<div class="people">
    <div class="people-div teacher">
        <img src="{{ project.avaurl_of_teacher }}" alt="Фото учителя" class="people-img">
        <div class="people-info">
            <h2 class="people-fio">{{project.teacher}}</h2>
            <span class="people-span">Руководитель проекта</span>
        </div>
    </div>
    <div class="people-div student">
        <img src="{{ project.avaurl_of_student }}" alt="Фото учителя" class="people-img">
        <div class="people-info">
            <h2 class="people-fio">{{project.student}}</h2>
            <span class="people-span">Исполнитель проекта</span>
        </div>
    </div>
    <div class="status">
        <span class="status-span">
            {% if project.status == 'send request' %}
            <span class="send-request">Заявка на рассмотрении руководителем</span>
            {% elif project.status == 'on work' %}
            <span class="on-work">Проект в процессе выполнения</span>
            {% endif %}
        </span>
    </div>
</div>
<div class="content">
    <div class="name">
        <form method="POST" action="{% url 'correct_project' %}" id="form_name" class="name-form">
            {% csrf_token %}
            <input type="hidden" name="project" value="{{project.project_id}}" />
            <textarea id="name" name="name" class="textarea name-textarea" onkeyup="textarea_size(this)"
                disabled>{{project.name}}</textarea>
        </form>
        {% if user.role == 'Ученик' %}
        <button onclick="return edit(this, 'name')" class="edit-btn">
        </button>
        {% endif %}
    </div>

    <div class="descr">
        <form method="POST" action="{% url 'correct_project' %}" id="form_description" class="descr-form">
            {% csrf_token %}
            <input type="hidden" name="project" value="{{project.project_id}}">
            <textarea id="description" name="description" class="textarea descr-textarea" onkeyup="textarea_size(this)"
                disabled>{{project.description}}</textarea>
        </form>
        {% if user.role == 'Ученик' %}
        <button onclick="return edit(this, 'description')" class="edit-btn"></button>
        {% endif %}
    </div>

    <div class="files">
        <form method="POST" action="{% url 'add_file' %}" enctype="multipart/form-data" id="add-file">
            {% csrf_token %}
            <input type="hidden" name="file_id" value="-1" />
            <input type="hidden" name="project_id" value="{{project.project_id}}" />
            <label for="add_file" class="file-label">Добавить файл</label>
            {% if user.role == 'Ученик' %}
            <a href="{% url 'trash' %}?project_id={{project.project_id}}">Корзина</a>
            {% endif %}
            <input type="file" id="add_file" onchange="check_file_name(this)" class="file-input" name="file" />
        </form>
        <ul class="file-list">
            {% for files_pack in files_packs %}
            <li class="file-item">
                <a href="{% url 'download_file' %}?file_id={{files_pack.file.id}}"
                    title="Загрузить файл">{{files_pack.name}}</a>
                <div class="btns">
                    <button onclick="show_window('comments{{files_pack.file.id}}')" title="Посмотреть комментарии">
                        <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M6.79895 17.8034C6.35668 18.1298 5.73 18.0406 5.39921 17.6042C5.26989 17.4335 5.2 17.2262 5.2 17.0133L5.19937 14.8423H4.6C3.16406 14.8423 2 13.6935 2 12.2764V5.56582C2 4.14876 3.16406 3 4.6 3H15.4C16.8359 3 18 4.14876 18 5.56582V12.2764C18 13.6935 16.8359 14.8423 15.4 14.8423H10.81L6.79895 17.8034Z"
                                fill=" #5A88FF" />
                        </svg>
                    </button>
                    <button class="btn-old-files" onclick="show_window('old-files{{files_pack.file.id}}')"
                        title="Посмотреть предыдущие версии файла">
                        <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M4.31 9.49981L7.27297 12.4628C7.56586 12.7557 7.56586 13.2305 7.27297 13.5234C7.0067 13.7897 6.59004 13.8139 6.29643 13.596L6.21231 13.5234L1.96967 9.28078C1.7034 9.01452 1.6792 8.59785 1.89705 8.30424L1.96967 8.22012L6.21231 3.97748C6.5052 3.68459 6.98008 3.68459 7.27297 3.97748C7.53924 4.24375 7.56344 4.66041 7.34559 4.95402L7.27297 5.03814L4.31 7.99981L10 8.00045C14.1979 8.00045 17.6162 11.3381 17.7462 15.5044L17.75 15.7505C17.75 16.1647 17.4142 16.5005 17 16.5005C16.5858 16.5005 16.25 16.1647 16.25 15.7505C16.25 12.3754 13.5748 9.62514 10.2291 9.50458L10 9.50045L4.31 9.49981L7.27297 12.4628L4.31 9.49981Z"
                                fill="#88cc5a" />
                        </svg>
                    </button>
                    {% if user.role == 'Ученик' %}
                    <label for="delete_file{{files_pack.file.id}}" class="btns-label" title="Удалить файл">
                        <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M3.89705 4.05379L3.96967 3.96967C4.23594 3.7034 4.6526 3.6792 4.94621 3.89705L5.03033 3.96967L10 8.939L14.9697 3.96967C15.2359 3.7034 15.6526 3.6792 15.9462 3.89705L16.0303 3.96967C16.2966 4.23594 16.3208 4.6526 16.1029 4.94621L16.0303 5.03033L11.061 10L16.0303 14.9697C16.2966 15.2359 16.3208 15.6526 16.1029 15.9462L16.0303 16.0303C15.7641 16.2966 15.3474 16.3208 15.0538 16.1029L14.9697 16.0303L10 11.061L5.03033 16.0303C4.76406 16.2966 4.3474 16.3208 4.05379 16.1029L3.96967 16.0303C3.7034 15.7641 3.6792 15.3474 3.89705 15.0538L3.96967 14.9697L8.939 10L3.96967 5.03033C3.7034 4.76406 3.6792 4.3474 3.89705 4.05379L3.96967 3.96967L3.89705 4.05379Z"
                                fill="#e24a4a" />
                        </svg>

                    </label>
                    {% endif %}
                </div>
                <form method="POST" action="{% url 'delete_file' %}" class="del-form">
                    {% csrf_token %}
                    <input type="hidden" name="file_id" value="{{files_pack.file.id}}" />
                    <input type="submit" id="delete_file{{files_pack.file.id}}" name="file"
                        style="display:none; visibility:hidden" />
                </form>
            </li>
            {% endfor %}
        </ul>
    </div>

    {% if project.status == 'send request' and user.role == 'Учитель'%}
    <form method="POST" action="{% url 'approve_project' %}" class="form-btn">
        {% csrf_token %}
        <input type="hidden" name="project_id" value="{{project.project_id}}">
        <input type="submit" id="approve_project" class="status-input" value="Одобрить проект">
    </form>
    {% elif project.status == 'on work' and user.role == 'Учитель' %}
    <form method="POST" action="{% url 'close_project' %}" class="form-btn">
        {% csrf_token %}
        <input type="hidden" name="project_id" value="{{project.project_id}}">
        <input type="submit" id="close_project " class="status-input" value="Завршить проект">
    </form>
    {% endif %}
</div>

{% for files_pack in files_packs %}
<div>
    <div id="comments{{files_pack.file.id}}" class="comment-window">
        {% if files_pack.file.comment is not None %}
        <div>{{files_pack.file.comment}}</div>
        {%else%}
        <form method="POST" action="{% url 'add_comment' %}" class="comment-form">
            {% csrf_token %}
            <input type="hidden" name="file_id" value="{{files_pack.file.id}}" />
            <textarea name="comment" class="textarea comment-textarea" placeholder="Введите комментарий"
                onkeyup="textarea_size(this)" required></textarea>
            <input type="submit" value="Отправить комментарий" class="comment-btn">
        </form>
        {%endif%}
        <button class="btn-exit" onclick="exit('comments{{files_pack.file.id}}')">
            <svg width="25" height="25" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="btn-exit-svg">
                <path
                    d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z"
                    fill="#000000"></path>
            </svg>
        </button>
    </div>
    <div id="old-files{{files_pack.file.id}}" class="old-files">
        <button class="btn-exit" onclick="exit('old-files{{files_pack.file.id}}')" type="button">
            <svg width="25" height="25" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="btn-exit-svg">
                <path
                    d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z"
                    fill="#000000"></path>
            </svg>
        </button>
        <h2 class="old-files-title">Предыдущие версии файла</h2>
        <ul class="old-files-list">
            {% for old_file in files_pack.old_files %}
            <li class="old-files-item">
                <a href="{% url 'download_file' %}?file_id={{old_file.file.id}}"
                    class="old-files-link">{{old_file.name}}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

{% endfor %}

<div class="update-file">
    <h2 class="update-file-title">Файл с таким именем уже существует</h2>
    <span class="update-file-subtitle">Вы хотите заменить его?</span>
    <div class="update-file-btns">
        <button onclick="close_update_window()" class="update-file-btn">Нет</button>
        <button onclick="update_file()" class="update-file-btn">Да</button>
    </div>
</div>

<div class="back-form"></div>

<script>

    function edit(elem, id) {
        let f = document.getElementById(id);
        f.disabled = false;
        elem.setAttribute("onclick", "return save(this, '" + id + "')");
        f.style.background = '#f1f1f1';
        $(elem).css({ 'background-image': 'url("../../static/img/project/accept.svg")' });
    }

    function save(elem, id) {
        let f = document.getElementById(id);
        let form = document.getElementById("form_" + id);
        $(elem).css({ 'background-image': 'url("../../static/img/global/pencil.svg")' });
        console.log(form);
        form.submit();
    }
    files_names = {{ project.files_names | js }};
    update_files_url = "{% url 'update_file' %}"
</script>

<script src="{% static 'js/projects/project_page.js' %}"></script>
{% endblock %}