{% 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>Чат {{ request.user }} {{ request.user.pk }}</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>

                            {% if team_orders %}
                                <li role="presentation">
                                    <a href="#tab3" data-toggle="tab">Исполнители</a>
                                </li>
                            {% endif %}
                        </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">
                                        {% thumbnail contact.avatar "60x60" crop="center" as im %}
                                            <img src="{{ im.url }}" alt="mess-image">
                                        {% endthumbnail %}
                                    </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 }}" style="color:black;">{{ contact.username }}</a></div>
                                    </p>

                                    <a href="#" class="conMess">Контакты</a>

                                    <span>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="senderId"/>
                            <input type="hidden" value="" name="recipentId" id="recipentId"/>
                            <textarea id="chat" name="chat_message" class="box-sizing"></textarea>
                            <div class="bunChat">
                                <div class="setChat box-sizing">
                                    <p>Прикрепить файл</p>
                                    <span>Не более 10 файлов с общим объемом 500мб</span>
                                </div>
                                <a id="contact-chat-add-message" href="javascript:void(0)">отправить</a>
                            </div>
                        </form>
                    </div>

                    <div class="col-lg-3 wrChat1">
                        <div class="textAreaBlock2 box-sizing disTab">
                            <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>
                </div>
                <!-- End block Tab1 -->

                <!-- 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.project.id }}"
                                    id="orderBlock{{ order.id }}" data-recipent-id="{{ order.project.customer.pk }}" data-id="{{ order.id }}">
                                    <span class="dimovChat"></span>
                                    <p class="titleOB">{{ order }}</p>
                                    <div class="hideOBB">
                                        <p class="pOB"><span>Исполнитель:</span> {{ request.user.get_full_name }}</p>

                                        <a href="javascript:void(0)" class="linkChat11">
                                            <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" id="orderId">
                            <input type="hidden" id="senderId" value="{{ request.user.pk }}"/>
                            <input type="hidden" id="recipentId">
                            <textarea id="chat" class="box-sizing"></textarea>
                            <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">
                        <p>Этапы работы</p>
                        <div class="stepssBlock box-sizing disTab">
                            <p class="titleStepss">1 / Согласование условий</p>
                            <p class="textStepss">
                                Обсуджение задания и условий выполнения работы.
                                Подтверждение заказа исполнителем.
                            </p>
                        </div>
                        <div id="order-stages"></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>


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

                            </div>
					    </div>


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

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


                        <div class="textAreaBlock2 box-sizing disTab">
                            <ul class="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>
                    </div>
                </div>
                <!-- End block Tab2-->

                {% if team_orders %}
                    <!-- Tab3 groups block -->
                    <div class="chatBlock disTab tab-pane fade" id="tab3">
                        <div class="col-lg-3 wrMessages">
                            <div class="messageBlock box-sizing disTab">
                                <p>Заказы</p>
                                {% for torder in team_orders %}
                                    <div class="team-order-block orderBlock box-sizing"
                                         data-team-id="{{ torder.team.pk }}" data-order-id="{{ torder.pk }}">
                                        <span class="dimovChat"></span>
                                        <p class="titleOB">
                                            {{ torder }}
                                        </p>
                                        <div class="hideOBB disTab">
                                            <p class="pOB">
                                                <span>Исполнитель:</span> {{ torder.team.name }}
                                            </p>
                                            <ul class="listChat1">
                                                {% for tuser in torder.team.users.all %}
                                                    <li>{{ tuser }}</li>
                                                {% endfor %}
                                            </ul>
                                            <p class="pOB">
                                                <span>Чаты:</span>
                                                  {% if request.user.pk != torder.team.owner.pk %}
                                                        <span class="team-chat-user"
                                                              data-id="{{ torder.team.owner.pk}}">{{ torder.team.owner.username }},</span>
                                                    {% endif %}
                                                {% for tuser in torder.team.contractors.all %}
                                                    {% if request.user.pk != tuser.pk %}
                                                        <span class="team-chat-user"
                                                              data-id="{{ tuser.pk }}">{{ tuser.username }},</span>
                                                    {% endif %}
                                                {% endfor %}
                                            </p>
                                            <a href="#" class="linkChat11">
                                                <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-team-space"></div>
                            <form id="team-chat-form">
                                <input type="hidden" name="sender" id="senderId" value="{{ request.user.pk }}"/>
                                <input type="hidden" name="recipent" id="recipentId" value=""/>
                                <input type="hidden" name="order" id="orderId" value=""/>
                                <input type="hidden" name="team" id="teamId" value=""/>
                                <input type="hidden" name="document-send" id="documentSendIds"/>
                                <textarea id="chatText" class="chat-textarea box-sizing"></textarea>
                                <div class="bunChat">
                                    <div class="setChat box-sizing upload">
                                        <input type="file" name="file" id="upload-document-team"/>
                                        <p>Прикрепить файл</p>
                                    </div>
                                    <div id="progress" class="progress">
                                        <div class="progress-bar progress-bar-success"></div>
                                    </div>

                                    <div id="document-send"></div>
                                    <a href="#" id="add-team-chat-message">отправить</a>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-3 wrstepschat">

                        </div>
                    </div>
                    <!-- End block Tab3-->
                {% endif %}
            </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');

            setTimeout(function () {
                $(".team-order-block").first().trigger('click');
            }, 1000);

            var url = '/chat/create/';
            //Загрузка документов
            $('#upload-document-team').fileupload({
                url: url,
                formData: {
                    sender: $("#team-chat-form #senderId").val(),
                    recipent: $("#team-chat-form #recipentId").val(),
                    team: $("#team-chat-form #teamId").val(),
                    order: $("#team-chat-form #orderId").val(),
                },
                crossDomain: false,
                beforeSend: function (xhr, settings) {
                    $('#progress .progress-bar').css(
                            'width',
                            '0%'
                    );
                    if (!csrfSafeMethod(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                },
                dataType: 'json',
                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        var currentValue = $("#documentSendIds").val();
                        currentValue += file.id + ';';
                        $("#documentSendIds").val(currentValue);
                        var htmlImg = '<p>' + file.name + '</p>';
                        var document_send = $(htmlImg).appendTo("#document-send");
                    });
                },
                fail: function(e){
                  console.log(e);
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                            'width',
                            progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');

            // Согласование этапов
            $("#order-stages").on('click', "#approve-stages", function (e) {
                e.preventDefault();
                $(".stage-block-approve").each(function () {
                    var stageId = $(this).attr('data-id');
                    $.ajax({
                        url: '/api/stages/' + stageId + '/',
                        type: 'PATCH',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'))
                        },
                        data: "status=in_process",
                        dataType: 'json',
                        success: function (json) {
                            console.log(json);

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

                });
                var orderId = $(this).attr('data-order-id');

                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": orderId,
                        "msg": "Исполнитель согласовал этапы для заказа " +  orderId,
                    }
                });

            });

            $(".team-chat-user").on('click', function (e) {
                e.stopPropagation();
                var recipentId = $(this).attr('data-id');
                $("#team-chat-form #recipentId").val(recipentId);
            });

            $(".team-order-block").on('click', function () {

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

                var teamId = $(this).attr('data-team-id');
                var orderId = $(this).attr('data-order-id');
                $("#team-chat-form #teamId").val(teamId);
                $("#team-chat-form #orderId").val(orderId);

                var inbox = document.getElementById('message-chat-team-space');
                inbox.innerHTML = '';

                $.ajax({
                    url: '/api/message',
                    type: 'GET',
                    data: {csrfmiddlewaretoken: csrftoken, 'team': teamId, 'order': orderId},
                    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"><div class="topCommChat">' +
                                    '<p class="nameCommChat">' + senderName + '</p> <span>' + v.created + '</span></div>' +
                                    '<p class="textCommChat">' + v.text + '</p></div>';
                        });
                    }
                });

            });

            // Вытащить сообщения для чата заказа
            $('.order-block').on('click', function () {
                $('.order-block').each(function () {
                    $(this).removeClass('orAct');
                });
                $(this).addClass('orAct');

                var orderId = $(this).attr('data-id');
                var recipentId = $(this).attr('data-recipent-id');
                var projectId = $(this).attr('data-project-id');

                $("#chat-order-add #orderId").val(orderId);
                $("#add-form-order-note #orderNote").val(orderId);
                $("#orderArbitrationId").val(orderId);
                $("#projectReviewId").val(projectId);

                $("#chat-order-add #recipentId").val(recipentId);
                $("#targetCustomerId").val(recipentId);
                $("#add-form-order-note #recipentNote").val(recipentId);



                var inbox = document.getElementById('message-chat-order-space');
                inbox.innerHTML = '';

                $.ajax({
                    url: '/api/message',
                    type: 'GET',
                    data: {csrfmiddlewaretoken: csrftoken, 'order': orderId},
                    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"><div class="topCommChat">' +
                                    '<p class="nameCommChat">' + senderName + '</p> <span>' + v.created + '</span></div>' +
                                    '<p class="textCommChat">' + v.text + '</p></div>';
                        });
                    }
                });

                $.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>';

                        });
                        $(".notes-block").html(noteHtmlInbox);
                    }
                });

                $.ajax({
                   url:'/api/orders/' + orderId + '/',
                   type: 'GET',
                   data:{csrfmiddlewaretoken: csrftoken},
                   dataType: 'json',

                }).then(function(data){
                    var htmlInbox = "";
                    var stagesReservedHtml = "";
                    var stagesPaidProcess = [];
                    var stagesInWork = [];
                    var stagesResults = data.stages;
                    var statusNotAgreed = false;
                    var stagesCompleted = [];
                    if (stagesResults.length > 0) {
                        $.each(stagesResults, function (i, v) {
                            if (v.status == "completed"){
                                stagesCompleted.push(v);
                            }
                            if(v.status == "not_agreed"){
                                statusNotAgreed = true;
                            }
                            if(!data.secure){
                                if(v.status == "in_process"){
                                    stagesInWork.push(v);

                                }
                            } else if ((v.status == "in_process") && (v.is_paid)){
                                stagesPaidProcess.push(v);
                                stagesInWork.push(v);
                            }

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

                            htmlInbox += '<div data-id="' + v.id + '" class="numberStepp box-sizing stage-block-approve"><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></div>';
                        });

                        if (statusNotAgreed) {
                                htmlInbox += '<div class="textAreaBlock2 FFD box-sizing disTab">' +
                                        '<a id="approve-stages" data-sender-id="{{ request.user.pk }}" data-recipent-id="' + recipentId + '"' +
                                        ' data-order-id="' + orderId + '" href="#">согласовать</a></div>';
                        }
                    }

                    $("#order-stages").html(htmlInbox);
                    $(".stages-paid").html(stagesReservedHtml);
                    if(data.secure) {
                        $("#reserveSpace").show();

                    } else {
                       $("#reserveSpace").hide();
                    }

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

                            if(!stage.close_contractor){
                                stageWork += '<a href="#" class="closeStage" data-sender-id="{{ request.user.pk }}" data-recipent-id="'+ recipentId+'"' +
                                    ' data-order-id="'+ data.id +'" data-stage-id="'+ stage.id +'">Завершить этап</a>';
                            }else{
                                stageWork += '<p>Этап ожидает завершения статуса от заказчика</p>';
                            }
                            if (data.secure) {
                                stageWork += '<a href="#" data-toggle="modal" data-target="#arbitration-add">Обратитьсяв арбитраж</a>';
                            }
                            $("#stagesWork").html(stageWork);
                    }else{
                            $("#completeWork").hide();
                    }

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

                    if (data.status == 'completed'){
                       $("#leaveReview").hide();
                    }
                });


            });

            //Добавить заметку.
            $('#add-note-button').on('click', function (e) {
                e.preventDefault();
                $.ajax({
                    url: '/api/note/',
                    type: 'POST',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'))
                    },
                    data: $("#add-form-order-note").serialize(),
                    dataType: 'json',
                    success: function (json) {
                        console.log(json);
                        $("#add-form-order-note #chat2").val("");

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

            $('#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_contractor=True",
                        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);
                        }
                    });
            });

            // Вытащить сообщения для конактов
            $('.user-block').on('click', function () {
                var userId = $(this).attr('data-id');
                $("#contact-chat-form #recipentId").val(userId);
                $("#add-form-contractor-note #recipentNoteContractor").val(userId);
                $('.user-block').each(function () {
                    $(this).removeClass('mesAct');
                });

                $(this).addClass('mesAct');
                var inbox = document.getElementById('message-chat-space');
                inbox.innerHTML = '';
                $.ajax({
                    url: '/api/message',
                    type: 'GET',
                    data: {
                        csrfmiddlewaretoken: csrftoken,
                        'operand': 'in',
                        'sender_id': currentChatUser,
                        'recipent_id': userId
                    },
                    dataType: 'json',
                    success: function (json) {
                        $.each(json.results, function (i, v) {
                            console.log(v.sender.id);
                            var senderName = 'Вы';
                            var className = 'youChat';
                            if (v.sender.id == userId) {
                                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>';
                        });
                    }
                });

                $.ajax({
                    url: '/api/note/',
                    type: 'GET',
                    data: {csrfmiddlewaretoken: csrftoken,
                        'operand': 'in',
                        'sender_id': currentChatUser,
                        'recipent_id': userId},
                    dataType: 'json',
                    success: function (json) {
                        console.log(json.results);
                        var noteHtmlInbox = '';
                        $.each(json.results, function (i, v) {
                            noteHtmlInbox += '<li>' + v.text + '<li>';

                        });
                        $(".contractor-notes-block").html(noteHtmlInbox);
                    }
                });

            });

            //Добавить сообщение для исполнителей в группе

            $("#add-team-chat-message").on('click', function () {
                var chatMessage = $("#team-chat-form #chatText").val();
                var recipentId = $("#team-chat-form #recipentId").val();
                var senderId = $("#team-chat-form #senderId").val();
                var teamId = $("#team-chat-form #teamId").val();
                var orderId = $("#team-chat-form #orderId").val();

                var documentSendIds = $("#documentSendIds").val();
                console.log(documentSendIds);
                var teamDocumentIds = documentSendIds.split(';');
                teamDocumentIds.pop();
                console.log(teamDocumentIds);
                socket.add_team_message({
                    "format_type": "add_message_team",
                    "data": {
                        "sender_id": senderId,
                        "recipent_id": recipentId,
                        "chat_message": chatMessage,
                        "team_id": teamId,
                        "order_id": orderId,
                    }
                });

                $("#team-chat-form #chatText").val("");
                $("#document-send").html("");
            });

            // Добавить сообщение для контакта
            $('#contact-chat-add-message').on('click', function () {
                var chatMessage = $("#chat").val();
                var recipentId = $("#recipentId").val();
                var senderId = $("#senderId").val();

                socket.add_contact_message({
                    "format_type": "add_message_contact",
                    "data": {
                        "sender_id": senderId,
                        "recipent_id": recipentId,
                        "chat_message": chatMessage,
                    }
                });

                var inbox = $('#message-chat-space').html();
                $("#chat").val("");
            });

        });
    </script>
{% endblock %}