{% extends 'partials/base.html' %}
{% load staticfiles %}
{% load thumbnail %}
{% block content %}
    {% include 'partials/header.html' %}
    <div class="container mainScore">
        <div class="row">
            <div class="col-lg-12 allProjects">
                <h1>Чат</h1>
            </div>
            <div class="btnReadyBlock disTab">
                <div class="triangle1"></div>
                <div class="col-lg-6 col-lg-offset-3 tabsChat">
                    <div class="profileTabs2">
                        <ul class="nav nav-tabs nav-justified">
                            <li role="presentation" class="active">
                                <a href="#tab1" data-toggle="tab">Личные</a>
                            </li>
                            <li role="presentation">
                                <a href="#tab2" data-toggle="tab">Исполнители</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="tab-content">
            <!-- Tab1 (contacts block)-->
                <div class="chatBlock disTab tab-pane fade in active" id="tab1">
                    <div class="col-lg-3 wrMessages">
                        <div class="messageBlock box-sizing disTab">
                            <p>Контакты</p>
                            {% for contact in contacts_users %}
                                <div class="message messd user-block" data-id="{{ contact.pk }}">
                                    <div class="imgMess">
                                        {% if contact.avatar %}
                                            {% thumbnail contact.avatar "60x60" crop="center" as im %}
                                                <img src="{{ im.url }}" alt="mess-image">
                                            {% endthumbnail %}
                                        {% else %}
                                            <img src="{% static 'img/profile.jpg' %}" alt="mess-image">
                                        {% endif %}
                                    </div>
                                    <p class="nameMess">
                                    {% if contact.is_contractor %}
                                      {% url "users:contractor-profile" pk=contact.pk as contact_url %}
                                    {% else %}
                                      {% url "users:customer-profile-open-projects" pk=contact.pk as contact_url %}
                                    {% endif %}
                                    <div><a href="{{ contact_url }}">{{ contact.username }}</a></div>
                                    </p>

                                    <a href="#" data-id="{{ contact.id }}" class="conMess">Контакты</a>

                                    <span class="contact-count-{{ contact.pk|add:request.user.pk }}">0</span>
                                    <a href="#" class="deleteMess" data-recipent-id="{{ contact.pk }}">
                                        Удалить контакт
                                    </a>
                                </div>
                            {% endfor %}

                        </div>
                    </div>
                    <div class="col-lg-6 commChat" id="contact-chat">
                        <div id="message-chat-space"></div>
                        <form id="contact-chat-form">
                            <input type="hidden" value="{{ request.user.pk }}" name="senderId" id="senderContactId"/>
                            <input type="hidden"  name="recipentId" id="recipentContactId">
                            <textarea id="chat" name="chat_message" class="box-sizing"></textarea>
                            <p class="errorEmptyMessage" style="color: red;display:none;">Пустое сообщение нельзя отправить</p>

                            <div class="bunChat">
                                <div class="setChat box-sizing upload">
                                        <input type="file" name="file" id="upload-document-contact">
                                        <p>Прикрепить файл</p>
                                </div>
                                <div id="document-send-contact"></div>
                                  <a id="contact-chat-add-message" href="#">отправить</a>
                            </div>

                        </form>

                    </div>
                    <div class="col-lg-3 wrChat1">
                        <div class="col-lg-12 documentsChat">
						<p>Прикрепленные документы</p>
						<ul id="documentSpace">
						</ul>
						<a href="{% url 'common:create' %}">
							Распечатать с помощью ресурса
						</a>
					    </div>

                        <div class="textAreaBlock2 box-sizing disTab">
                            <p>Заметки</p>
                            <ul class="contractor-notes-block">
                            </ul>
                            <form id="add-form-contractor-note">
                            <p>Для заметок</p>
                             <input type="hidden" name="sender" id="senderNoteContractor" value="{{ request.user.pk }}"/>
                             <input type="hidden" name="recipent" id="recipentNoteContractor" value=""/>
                             <textarea id="chat2" name="text"></textarea>
                            <a href="#" id="add-note-contractor">сохранить</a>
                            </form>
                        </div>
                    </div>

                    <!-- order-info -->
                        {% include 'contact-info.html' %}
                    <!-- -->
                </div>
            <!-- End block Tab1(contacts block)-->

            <!-- Tab2 (chat order block)-->
                <div class="chatBlock disTab tab-pane fade" id="tab2">
                    <div class="col-lg-3 wrMessages">
                        <div class="messageBlock box-sizing disTab">
                            <p>Заказы</p>
                            {% for order in orders %}
                                <div class="orderBlock box-sizing order-block" data-project-id="{{ order.id }}"
                                     id="orderBlock{{ order.order.id }}" data-secure-deal="{% if order.order.secure %}true{% else %}false{% endif %}"
                                     {% if order.order.contractor %}
                                     data-recipent-id="{{ order.order.contractor.pk }}"
                                     {% else %}
                                     data-recipent-id="{{ order.order.team.owner.pk }}"
                                     {% endif %} data-id="{{ order.order.id }}">
                                    <span class="dimovChat"></span>
                                    <p class="titleOB">{{ order }}</p>
                                    <div class="hideOBB">
                                        <p class="pOB">
                                            <span>Исполнитель:</span>
                                            {% if order.order.contractor %}
                                                {{ order.order.contractor.get_full_name }}
                                            {% else %}
                                                {{ order.order.team.name }}
                                            {% endif %}
                                        </p>
                                        <a href="#" class="linkChat11 full-order-info">
                                            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                            Полное описание заказа
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-lg-6 commChat">
                        <div id="message-chat-order-space"></div>
                        <form id="chat-order-add">
                            <input type="hidden" name="senderId" id="senderId" value="{{ request.user.pk }}"/>
                            <input type="hidden" name="recipentId" id="recipentId">
                            <input type="hidden" name="orderId" id="orderId">
                            <textarea id="chat" class="box-sizing"></textarea>
                            <p class="errorEmptyMessage" style="color: red;display:none;">Пустое сообщение нельзя отправить</p>
                            <div class="bunChat">
                                <div class="setChat box-sizing upload">
                                        <input type="file" name="file" id="upload-document-order">
                                        <p>Прикрепить файл</p>
                                </div>
                                <div id="document-send-order"></div>
                                <a href="#" id="order-chat-add-message">отправить</a>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-3 wrstepschat" id="order-stages-tab">
                        <p>Этапы работы</p>
                        <div class="stepssBlock box-sizing disTab">
                            <p class="titleStepss">1 / Согласование условий</p>
                            <p class="textStepss">
                                Обсуджение задания и условий выполнения работы. Подтверждение заказа исполнителем.
                            </p>
                        </div>

                        <div id="order-stages" class="stepssBlock"></div>

                        <div class="stepssBlock box-sizing disTab" id="reserveSpace" style="display:none;">
                            <p class="titleStepss">2 / Резервирование</p>
                            <p class="textStepss">
                                Резервирование заказчиком суммы оплаты по заказ.
                                Деньги перечисляются и хранятся насайте.
                            </p>
                            <ul class="stages-paid"></ul>

                            <div class="textAreaBlock2 FFD box-sizing disTab">
						        <a href="#" id="reserve-button" data-order-id="">Зарезервировать</a>
					        </div>

					    </div>

                        <!-- Зарезервировать средства (модальное окно)-->
                                {% include 'reverse_stage_modal.html' %}
                        <!-- Конец блока  -->

					    <div class="stepssBlock box-sizing disTab" id="completeWork">
						    <p class="titleStepss">3 / Выполнение работы</p>
						    <p class="textStepss">
							    Процесс выполнения задания в заказе до получения
                                заказчиком итогового результата работы.
						    </p>
                            <div id="stagesWork" class="stages-work"></div>
					    </div>

                        <div class="closeChat closeChat1" id="leaveReview" style="display: none;">
                            <a href="#" data-toggle="modal" data-target="#review-add">
                                Закрыть проект<br>и оставить отзыв
                            </a>
                        </div>

                        <div class="col-lg-12 documentsChat">
						    <p>Прикрепленные документы</p>
						    <ul id="documentOrderSpace"></ul>
						<a href="{% url 'common:create' %}">
							Распечатать с помощью ресурса
						</a>
					    </div>

                        <div class="textAreaBlock2 box-sizing disTab">
                            <ul class="order-notes-block">
                            </ul>
                            <p>Для заметок</p>
                            <form id="add-form-order-note">
                                <textarea id="chat2" name="text"></textarea>
                                <input type="hidden" name="order" id="orderNote" value=""/>
                                <input type="hidden" name="sender" id="senderNote" value="{{ request.user.pk }}"/>
                                <input type="hidden" name="recipent" id="recipentNote" value=""/>
                                <a href="#" id="add-note-button">сохранить</a>
                            </form>
                        </div>

                        <!-- Review add -->
                        {% include 'review_add_modal.html' %}
                        <!-- -->

                        <!-- Arbitration add -->
                        {% include 'arbitration_modal.html' %}
                        <!-- -->

                        <!-- order-info -->
                        {% include 'order_info.html' %}
                        <!-- -->


                    </div>
                </div>
            <!-- End block (chat order block) -->
            </div>
            {% include 'partials/footer.html' %}
        </div>
    </div>

{% endblock %}

{% block js_block %}
    <script type="text/javascript">
           var userId = {{ request.user.pk }};
           var domain = '{{ request.META.HTTP_HOST }}';
           var port = '{{ request.META.SERVER_PORT }}';

    </script>
    <script type="text/javascript" src='{% static "js/chat.js"  %}'></script>
    <script type="text/javascript">
        $(function () {
            var currentChatUser = {{ request.user.pk }};
            var form = document.getElementById('message_form');

            $('body').on('focus',".term-picker", function(){
                $(this).datepicker({
{#                    minDate: 0,#}

                });
            })

            $("#reserve-button").on("click",function(e) {
                e.preventDefault();
                $("#reserve-stage-modal").modal('show');
                var orderId = $(this).attr('data-order-id');
                    $.ajax({
                        url: '/api/stages/',
                        type: 'GET',
                        data: {csrfmiddlewaretoken: csrftoken, 'order': orderId},
                        dataType: 'json',
                        success: function (json) {
                            var outputValues = '';
                            var totalSum = 0;
                            var stagesIds = '';
                            var notPaidCount = 0;
                            $.each(json.results, function (i, v) {
                                if((v.status == 'in_process') && (!v.is_paid)) {
                                    totalSum += parseInt(v.cost);
                                    notPaidCount +=1;
                                    outputValues += '<option data-stage-sum="' + v.cost + '" value="' + v.id + '">' + v.name + '</option>';
                                    stagesIds += v.id + ';'
                                }
                            });

                            $("#stagesSelect").html(outputValues);
                            $(".totalSum").text(totalSum);

                            if(json.results.length>notPaidCount && notPaidCount>0){
                                $("#choiceWayOrder").hide();
                            }

                            $("#choiceWayOrder").val(totalSum);
                            $("#ordermodalId").val(orderId);

                            $("#stages-pay-form #stageSumPay").val(totalSum);
                            $("#stages-pay-form #stagesIds").val(stagesIds);

                            $("#choiceWayOrder").attr('data-stages-ids',stagesIds);

                        }
                    });

            });

            $("#tab2").on("change","input[name=choice_way]:radio", function(e){
                var sumStage = $("#stagesSelect").find('option:selected').attr('data-stage-sum');
                var currIdStage = $("#stagesSelect").find('option:selected').val();
                $("#choiceWayStage").val(sumStage);
                var currValue = $(this).val();
                $("#stages-pay-form #stageSumPay").val(currValue);
                var selectId = ($(this).attr('id'));
                if (selectId == 'choiceWayOrder'){
                     $("#stages-pay-form #stagesIds").val($(this).attr('data-stages-ids'));
                    $("#stagesSelect").prop('disabled', 'disabled');
                }else {
                    $("#stages-pay-form #stagesIds").val(currIdStage);
                    $("#stagesSelect").prop('disabled', false);
                }

            });

            $("#tab2").on("change","#stagesSelect", function(e){
                var sumStage = $(this).find('option:selected').attr("data-stage-sum");
                $("#choiceWayStage").val(sumStage);
                $("#stages-pay-form #stageSumPay").val(sumStage);
                $(".stageSum").text(sumStage);
                $("#stages-pay-form #stagesIds").val($(this).val());
            });

            //Получить заказы
            function getStages(orderId, senderId, recipentId, secureOrder) {
                $.ajax({
                   url:'/api/orders/' + orderId + '/',
                   type: 'GET',
                   data:{csrfmiddlewaretoken: csrftoken},
                   dataType: 'json',
                }).then(function(data){
                    var isReviewLeave = data.has_user_review;
                    var stagesResults = data.stages;
                    var stageCount = stagesResults.length;
                        if (stageCount == 0) {
                            $("#reserveSpace").hide();
                            stageCountVal = 1;
                        } else {
                            stageCountVal = stageCount;
                        }
                        var htmlInbox = "";
                        var htmlInboxStage = '<p class="textStepss">Какое кол-во этапов подразумевает работа? ' +
                                '<input type="text" id="countStage" value="' + stageCountVal + '"size="3"/></p>';

                        if (stageCount == 0) {
                            htmlInboxStage += '<div class="numberStepp box-sizing" id="stage1">' +
                                    '<p>Этап <span class="stage-span-id">1</span></p><form class="new-stages-form" id="stage-form">' +
                                    '<label for="">Название</label><input class="form-control" name="name" type="text">' +
                                    '<label for="">Цена</label><input class="form-control" name="cost" type="text">' +
                                    '<input class="form-control orderStagesInput" name="order" type="hidden" value="' + orderId + '">' +
                                    '<input class="form-control" type="hidden" name="status" value="send_approve">' +
                                    '<label for="">Срок</label><input class="term-picker form-control datepicker" name="term" type="text">' +
                                    '<label for="">Результат</label><input class="form-control" name="result" type="text">' +
                                    '<input class="form-control" name="pos" value="1" type="hidden">' +
                                    '</form></div>';
                        }
                        var statusNotAgreed = true;
                        var stagesInWork = [];
                        var stagesPaidProcess = [];
                        var stagesCompleted = [];
                        var stagePaidCount = 0;
                        var stagesReservedHtml = "";

                        $.each(stagesResults, function (i, v) {
                            if (v.status == "completed"){
                                stagesCompleted.push(v);
                            }
                            if(!data.secure){
                                if(v.status == "in_process") {
                                    stagesInWork.push(v);
                                }
                            }else if ((v.status == "in_process") && (v.is_paid)){
                                stagesInWork.push(v);
                                stagesPaidProcess.push(v);
                            }

                            if(v.is_paid){
                                stagePaidCount +=1;
                            }

                            if (v.status == "not_agreed" || v.status == 'cancel_approve' || v.status == 'send_approve') {
                                htmlInbox += '<div class="numberStepp box-sizing">' +
                                        '<p>Этап</p><form class="update-stages-form" data-stage-id="' + v.id + '" id="stage-form-' + v.pos + '">' +
                                        '<label for="">Название</label><input class="form-control" type="text" name="name" value="' + v.name + '">' +
                                        '<label for="">Цена</label><input class="form-control" type="text" name="cost" value="' + v.cost + '" >' +
                                        '<input class="form-control orderStagesInput" type="hidden" name="order" value="' + v.order + '">' +
                                        '<input class="form-control" type="hidden" name="status" value="send_approve">' +
                                        '<label for="">Срок</label><input class="term-picker form-control datepicker" type="text" name="term" value="' + v.term + '" />' +
                                        '<label for="">Результат</label><input class="form-control" type="text" name="result" value="' + v.result + '" >' +
                                        '</form></div>';
                            } else {
                                statusNotAgreed = false;
                                htmlInboxStage = "";
                                var statusName = "";
                                switch (v.status){
                                    case 'completed':
                                        statusName = 'Завершен';
                                        break;
                                    case 'in_process':
                                        statusName = 'Согласовано';
                                        break;
                                    default:
                                        statusName = '';
                                        break;
                                }
                                if (v.status == 'completed'){
                                    statusName = 'Завершен';
                                }
                                htmlInbox += '<div class="numberStepp box-sizing"><div class="insetNumStepp">' +
                                        '<p class="titleNumStepp"><span>Этап ' + v.pos + '</span>' + v.name + '</p>' +
                                        '<p class="textNumStepp">Результаты этапа:' + v.result + '</p><div>' +
                                        '<p>до '+ v.term +'</p><span>' + v.cost + '<i class="fa fa-rub"></i></span>' +
                                        '</div><div><p>'+ statusName +'</p></div></div></div>';

                            }
                            if(data.secure) {
                                if (v.is_paid) {
                                    stagesReservedHtml += '<li class="reserved">Сумма за этап ' + v.pos + '.Зарезервирована.</li>';
                                } else {
                                    stagesReservedHtml += '<li class="unreserved">Сумма за этап ' + v.pos + '.Не зарезервирована.</li>';
                                }
                            }
                        });

                        if (stagesResults.length == stagePaidCount && data.secure){
                            $("#reserve-button").parent().hide();
                        }else {
                            $("#reserve-button").parent().show();
                        }

                        if (statusNotAgreed) {
                            if(!data.secure) {
                                        htmlInbox += '<div class="box-sizing disTab">' +
                                        '<div class="checkbox"><input name="secure" id="secureOrder"  type="checkbox" style="opacity:1">' +
                                        'Перейти в режим безопасной сделки</div></div>';
                            }

                            htmlInbox +='<div class="textAreaBlock2 box-sizing disTab">' +
                                    '<a href="#" data-sender-id="' + senderId +'" ' +
                                    'data-recipent-id="' + recipentId +'" data-order-id="' + orderId + '" ' +
                                    'id="addStagesForm">отправить на согласование</a> </div>';
                        }else if((stagesResults.length>0) && (data.secure)){
                            $("#reserveSpace").show();
                        }
                        htmlInbox = htmlInboxStage + htmlInbox;
                        $("#order-stages").html(htmlInbox);
                        $("#completeWork").hide();

                        if(stagesInWork.length > 0){
                            $("#completeWork").show();
                            var stage = stagesInWork[0];
                            var stageWork = '<div class="numberStepp box-sizing">' +
                                    '<div class="insetNumStepp"><div><p>В работе '+ stage.name  +'</p></div> ' +
                                    '<div><p>Результат этапа : '+ stage.result +'</p></div>' +
                                    '<div><p>Срок сдачи '+ stage.term +'</p><span>' + stage.cost + '<i class="fa fa-rub"></i></span></div>' +
                                    '</div></div>';

                            if (stage.close_contractor){
                                stageWork += '<div class="textAreaBlock2 FFD box-sizing disTab"><a href="#" class="closeStage" data-order-id="'+ orderId + '" data-sender-id="{{ request.user.pk }}"' +
                                ' data-recipent-id="'+ recipentId + '" data-stage-id="'+ stage.id+'">Закрыть этап '+ stage.pos +'</a></div>';
                            }

                            if (data.secure){
                                stageWork += '<div class="textAreaBlock2 FFD box-sizing disTab"><a href="#" data-toggle="modal" data-target="#arbitration-add">Обратитьсяв арбитраж</a></div>';
                            }
                            $("#stagesWork").html(stageWork);
                        }

                        if (!data.secure){
                            $("#reserveSpace").hide();
                        }

                    if((stagesCompleted.length == stagesResults.length) && (stagesCompleted.length > 0) && (!isReviewLeave)){
                        $("#leaveReview").show();
                    }else {
                        $("#leaveReview").hide();
                    }

                     $(".stages-paid").html(stagesReservedHtml);

                });
            }

            //Закрыть этап
            $('#tab2').on('click','.closeStage', function(e){
                e.preventDefault();
                var stageId = $(this).attr('data-stage-id');
                var _this = $(this);
                $.ajax({
                        url: '/api/stages/' + stageId + '/',
                        type: 'PATCH',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'))
                        },
                        data: {close_customer: true, status: 'completed'},
                        dataType: 'json',
                        success: function (json) {
                            socket.send_stages_approve({
                                "format_type": "approve_stages",
                                "data": {
                                    "sender_id": _this.attr('data-sender-id'),
                                    "recipent_id": _this.attr('data-recipent-id'),
                                    "order_id": _this.attr('data-order-id'),
                                    "msg": "Заказчик закрыл этап " + json.name,
                                }
                            });
                            console.log(json);
                        },
                        error: function (e) {
                            console.log('error');
                            console.log(e);
                        }
                    });
            });

            // Добавление этапов
            $("#order-stages").on('click', "#addStagesForm", function (e) {
                e.preventDefault();
                var currentOrderId = $(this).attr('data-order-id');
                var secureOrderEl = $("#secureOrder");
                if(secureOrderEl.length > 0) {
                    var secOrderVal = false;
                    if (secureOrderEl.prop('checked')) {
                        secOrderVal = true;
                    }
                    $.ajax({
                        url: '/api/orders/' + currentOrderId + '/',
                        type: 'PATCH',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'))
                        },
                        data: {secure: secOrderVal},
                        dataType: 'json',
                        success: function (json){
                        },
                        error: function(e){
                            console.log(e);
                        }
                    });
                }

                $(".new-stages-form").each(function (i, v) {
                    $.ajax({
                        url: '/api/stages/',
                        type: 'POST',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'))
                        },
                        data: $(this).serialize(),
                        dataType: 'json',
                        success: function (json) {
                            console.log(json);

                        },
                        error: function (e) {
                            console.log('error');
                            console.log(e);
                        }
                    });

                });

                $(".update-stages-form").each(function (i, v) {
                    var currentStageId = parseInt($(this).attr('data-stage-id'));
                    $.ajax({
                        url: '/api/stages/' + currentStageId + '/',
                        type: 'PUT',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'))
                        },
                        data: $(this).serialize(),
                        dataType: 'json',
                        success: function (json) {
                            console.log(json);
                        },
                        error: function (e) {
                            console.log('error');
                            console.log(e);
                        }
                    });
                });


                var currentRecipentId = $(this).attr('data-recipent-id');
                var secureOrder = true

                socket.send_stages_approve({
                    "format_type": "approve_stages",
                    "data": {
                        "sender_id": userId,
                        "recipent_id": currentRecipentId,
                        "order_id": currentOrderId,
                        "msg": "Этапы для заказа "+ currentOrderId +"изменены",
                    }
                });

            });

            //Изменение счетчика
            $('#order-stages-tab').on('change', '#countStage', function () {
                var countStage = parseInt($(this).val());
                var currentCountStage = $("#order-stages .numberStepp").length;
                if ((countStage<1) || isNaN(countStage)) {
                    countStage = 1;
                    $('#order-stages-tab #countStage').val(currentCountStage);
                }else {
                    if (countStage > currentCountStage) {
                        for (var jj = currentCountStage; jj < countStage; jj++) {
                            var pos = jj + 1;
                            var lastFormStage = $("#order-stages .numberStepp").last();
                            var orderId = lastFormStage.find('.orderStagesInput').val();
                            var addFormTemplate = '<div class="numberStepp box-sizing" id="stage1">' +
                                    '<p>Этап <span class="stage-span-id">' + pos + '</span></p><form class="new-stages-form" id="stage-form">' +
                                    '<label for="">Название</label><input class="form-control" name="name" type="text">' +
                                    '<label for="">Цена</label><input class="form-control" name="cost" type="text">' +
                                    '<input class="form-control orderStagesInput" name="order" type="hidden" value="' + orderId + '">' +
                                    '<input class="form-control" type="hidden" name="status" value="send_approve">' +
                                    '<label for="">Срок</label><input class="term-picker form-control datepicker" name="term" type="text">' +
                                    '<label for="">Результат</label><input class="form-control" name="result" type="text">' +
                                    '<input class="form-control" name="pos" value="' + pos + '" type="hidden"></form></div>';
                            lastFormStage.after(addFormTemplate);
                        }

                    } else if (countStage < currentCountStage) {
                        var ii = currentCountStage;
                        $($("#order-stages .numberStepp").get().reverse()).each(function () {
                            var currenFormName = ($(this).find('form').attr('class'));
                            if (ii > countStage) {
                                $(this).remove();
                            }
                            ii--;
                        });

                    }
                }
            });

            // Для заказов все вытащить
            $('.order-block').on('click', function () {
                $("#chat-order-add").css("display", "block");
                $("#formsetStage").css("display", "block");

                $('.order-block').each(function () {
                    $(this).removeClass('orAct');
                });

                $(this).addClass('orAct');
                var orderId = $(this).attr('data-id');
                var projectId = $(this).attr('data-project-id');
                var recipentId = $(this).attr('data-recipent-id');
                var secureOrder = $(this).attr('data-secure-deal');
                secureOrder = Boolean(secureOrder);
                $("#chat-order-add #orderId").val(orderId);
                $("#add-form-order-note #orderNote").val(orderId);
                $("#orderArbitrationId").val(orderId);
                $("#projectReviewId").val(projectId);
                $("#reserve-button").attr('data-order-id', orderId);
                $("#targetContractorId").val(recipentId);
                $("#chat-order-add #recipentId").val(recipentId);
                $("#add-form-order-note #recipentNote").val(recipentId);
                $(".orderStagesInput").val(orderId);
                var inbox = document.getElementById('message-chat-order-space');
                var docList = document.getElementById('documentOrderSpace');
                inbox.innerHTML = '';
                docList.innerHTML = '';

                $.ajax({
                    url:'/api/documents',
                    type: 'GET',
                    data:{
                        csrfmiddlewaretoken: csrftoken,
                        'order': orderId,
                        'is_delete': false,
                        'is_send': true,
                    },
                    dataType: 'json',
                    success: function (json){
                        $.each(json.results, function (i, v) {
                            docList.innerHTML += '<li style="word-break: break-all;"><a class="file-link" href="/chat/download/' + v.file + '">' +  v.file+'</a><div class="remove-document" data-id="'+ v.id+'" style="right:-10px;"></div></li>';
                        });
                    },
                    error: function(e){
                        console.log(e);
                    }
                });
                $.ajax({
                    url: '/api/message',
                    type: 'GET',
                    data: {csrfmiddlewaretoken: csrftoken, 'order': orderId,'team__isnull': 'true'},
                    dataType: 'json',
                    success: function (json) {
                        $.each(json.results, function (i, v) {
                            var senderName = 'Вы';
                            var className = 'youChat';

                            if (v.sender.id !== currentChatUser) {
                                senderName = v.sender.username;
                                className = '';
                            }

                            inbox.innerHTML += '<div class="col-lg-12 insetCommChat ' + className + '"><div class="topCommChat">' +
                                    '<p class="nameCommChat">' + senderName + '</p><span>' + v.created + '</span></div>' +
                                    '<p class="textCommChat">' + v.text + '</p></div>';

                        });
                        var height = inbox.scrollHeight;
                        inbox.scrollTop = height;
                    }
                });
                $.ajax({
                    url: '/api/note/',
                    type: 'GET',
                    data: {
                        csrfmiddlewaretoken: csrftoken,
                        'order': orderId,
                    },
                    dataType: 'json',
                    success: function (json) {
                        console.log(json.results);
                        var noteHtmlInbox = '';
                        $.each(json.results, function (i, v) {
                            noteHtmlInbox += '<li>' + v.text + '<li>';
                        });
                        $(".order-notes-block").html(noteHtmlInbox);
                    }
                });
                getStages(orderId,userId,recipentId, secureOrder);
            });

        });
        var userId = '{{ request.user.pk }}';

    </script>
{% endblock %}