{% extends 'partials/base.html' %}

{% load staticfiles %}

{% block content %}
    {% include 'partials/header.html' %}

    <div class="container mainScore">
        <div class="row">
            <div class="col-lg-12">
                <p class="titleScore">Сравнение кандидатов по проекту</p>
            </div>

            <div class="titleBlockComparison disTab">
                <div class="triangle1"></div>
                <p>{{ object }}</p>
                <table class="compTable" id="compTable">
                    <thead>
                    <tr>
                        <th>№</th>
                        <th>Кандидат</th>
                        <th>Цена</th>
                        <th>Срок</th>
                        <th>Описание</th>
                        <th>Рейтинги/отзывы</th>
                        <th>Безопасные сделки</th>
                        <th>Решение</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for cand in object.candidates.all %}
                        <tr style="cursor:move;" class="items[]_{{ cand.pk }}" data-class="items[]_{{ cand.pk }}">
                            <td>{{ cand.position }}</td>
                            <td>
                                {{ cand.answer.author.username }}
                            </td>

                            <td>{{ cand.answer.budget }} <i class="fa fa-rub"></i></td>

                            <td>
                                {{ cand.answer.term }}<br> <span>{{ cand.answer.term_type }}</span>
                            </td>

                            <td>
                                <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                            </td>

                            <td>
                                <ul>
                                    <li><span>0</span></li>
                                    <li>
                                        <span>+0</span>
                                        0
                                        <small> - 0</small>
                                    </li>
                                    {% if cand.answer.contractor.cro %}
                                        <li>
                                            СРО
                                        </li>
                                    {% endif %}
                                </ul>
                            </td>

                            <td>
                                <span>0</span><br>
                                Готов работать по безопасной сделке
                            </td>

                            <td>
                                <div class="tableButtons disTab">
                                    <a href="{% url 'chat:chat-user' %}">
                                        <div class="btnTab btnTab1"></div>
                                    </a>

                                    <a href="{% url 'chat:chat-user' %}?user_id={{ cand.answer.author.pk }}">
                                        <div class="btnTab btnTab2"></div>
                                    </a>

                                    <form method="POST" action="{% url 'projects:delete-candidate' cand.pk %}">
                                    {% csrf_token %}<input class="btnTab btnTab3" type="submit" value="">
                                    </form>

                                    <div class="btnTab btnTab4"></div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

            {% include 'partials/footer.html' %}
        </div>
    </div>
{% endblock %}
{% block js_block %}
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
            integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function () {
            var fixHelper = function (e, ui) {
                ui.children().each(function () {
                    $(this).width($(this).width());
                });
                return ui;
            };
            $("#compTable tbody").sortable({
                forcePlaceholderSize: true,
                forceHelperSize: true,
                items: 'tr',
                update: function () {
                    var serial = $('#compTable tbody').sortable('serialize', {key: 'items[]', attribute: 'data-class'});
                    console.log(serial);
                    $.ajax({
                        url: '/projects/candidate/comparison/sort/',
                        method: 'POST',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                        },
                        data: serial,
                        dataType: 'json',
                        success: function (json) {

                            console.log(json);
                        },
                        error: function (jqXHR, e) {
                            console.log(jqXHR);
                            console.log(e);
                        }
                    });
                },
                helper: fixHelper,

            }).disableSelection();
            ;
        });
    </script>
{% endblock %}