{% extends 'partials/base.html' %}
{% load static %}
{% load thumbnail %}
{% load sass_tags %}
{% block head_css %}
    <link rel='stylesheet' href='{% sass_src "sass/chat_add.sass" %}' xmlns="http://www.w3.org/1999/html">
    <link rel='stylesheet' href='{% sass_src "sass/components/custom-components.sass" %}'>
{% endblock %}
{% block content %}
    {% include 'partials/header.html' %}
    <div class="modal" id="popupOk" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Уведомление</h4>
                </div>
                <div class="modal-body">Этапы отправлены исполнителю для согласования</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">ОК</button>
                </div>
            </div>
        </div>
    </div>
    <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">
                                <a href="#tab1" data-toggle="tab">Личные<span
                                        class="count-tab" id="count-tab-contact">{{ contacts_users_count }}</span></a>
                            </li>
                            <li role="presentation">
                                <a href="#tab2" data-toggle="tab">Исполнители<span
                                        class="count-tab" id="count-tab-order">{{ orders_ms_count }}</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {% include 'dialog_delete.html' %}
            <div class="tab-content">
                <!-- Tab1 (contacts block)-->
                <div class="chatBlock disTab tab-pane fade in" id="tab1">
                    <div class="row mod-row-eq-height" style="margin-left: 0; margin-right: 0">
                        <!-- Первый столбик "Контакты" -->
                        <div class="col-lg-3 wrMessages">
                            <div class="remove-margin">
                                <div class="messageBlock box-sizing disTab">

                                    <div class="header-wrapper">
                                        <span class="header">
                                            Контакты
                                        </span>
                                        <div class="triangle-header"></div>
                                    </div>

                                    <div class="fix-wrapper">
                                        {% for contact in contacts_users %}
                                            {% include 'inc-contact-card.html' %}
                                        {% endfor %}
                                        <div style="clear: both"></div>
                                    </div>

                                </div>
                            </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 js-chat"></textarea>
                                <p class="errorEmptyMessage" style="color: red;display:none;">Пустое сообщение нельзя
                                    отправить</p>
                                <div class="bunChat">
                                    <input style="display: none" type="file" name="file" id="upload-document-contact">
                                    <div onclick="$('#upload-document-contact').trigger('click')"
                                         style="display: inline-block;vertical-align: inherit; float: left"
                                         class="upload-new paper-clip">
                                        <p id="fileUploadAddBtn" style="margin: 0">прикрепить файл</p>
                                    </div>
                                    <a style="float: right" class="btn btn-send icon-send" href="#"
                                       id="contact-chat-add-message">отправить</a>
                                    <div style="clear: both"></div>
                                    <div style="padding-top: 10px;" id="document-send-contact"></div>
                                </div>

                            </form>

                        </div>
                        <!-- Второй столбик "Прикрепленные документы" -->
                        <div class="col-lg-3 wrstepschat">
                            <div class="col-lg-12">
                                {% include 'partials/inc-attach-documents.html' with class='documentSpace' %}
                            </div>

                            <div class="textAreaBlock2 box-sizing disTab">
                                <ol class="contractor-notes-block"></ol>
                                <form id="add-form-contractor-note">
                                    <div class="icon-note mod-align-center">Для заметок</div>
                                    <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>#}
                                    <a style="float: right" class="btn btn-send icon-send" href="#"
                                       id="add-note-contractor">сохранить</a>
                                </form>
                            </div>
                        </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="row mod-row-eq-height" style="margin-left: 0; margin-right: 0">
                        <!-- Первый столбик "Заказы" -->
                        <div class="col-lg-3 wrMessages">
                            <div class="remove-margin">
                                <div class="messageBlock box-sizing disTab">

                                    <div class="header-wrapper">
                                        <span class="header">
                                            Заказы
                                        </span>
                                        <div class="triangle-header"></div>
                                    </div>

                                    <div class="fix-wrapper">
                                        {% for order in orders %}
                                            {% include 'partials/inc-order-card.html' %}
                                        {% endfor %}
                                    </div>

                                    {% if archive_projects %}
                                        <div style="width:100%; height: 4px; float: left; background-color: white"></div>
                                        <a href="#" data-show="true" id="trashed-button"
                                           class="chat-button icon-books"
                                           style="margin-top: 4px">
                                            Показать архивные заказы
                                        </a>
                                        <div class="header-wrapper" id="show-archive-label" style="display: none;">
                                            <span class="header">
                                                Архивные заказы
                                            </span>
                                            <div class="triangle-header"></div>
                                        </div>
                                        <div class="fix-wrapper">
                                            <div id="archive-space" style="display:none;">

                                                <div id="trashed-orders">
                                                    {% for proj in archive_projects %}
                                                        <div data-id="{{ proj.order.id }}"
                                                             class="trashedOrderBlock box-sizing">
                                                            <span class="dimovChat"></span>
                                                            <p class="titleOB"> {{ proj.name }}</p>
                                                            <div class="hideOBB"><p class="pOB">
                                                <span>Исполнитель:
                                                    {% if proj.order.contractor %}
                                                        {{ proj.order.contractor.get_full_name }}
                                                    {% else %}
                                                        {{ proj.order.team.name }}
                                                    {% endif %}
                                                </span>
                                                            </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>
                                    {% endif %}
                                </div>
                            </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 js-chat"></textarea>
                                <p class="errorEmptyMessage" style="color: red;display:none;">Пустое сообщение нельзя
                                    отправить</p>
                                <div class="bunChat">
                                    <input style="display: none" type="file" name="file" id="upload-document-order">
                                    <div onclick="$('#upload-document-order').trigger('click')"
                                         style="display: inline-block;vertical-align: inherit; float: left"
                                         class="upload-new paper-clip">
                                        <p id="fileUploadAddBtn" style="margin: 0">прикрепить файл</p>
                                    </div>
                                    {#                                    <div id="document-send-order"></div>#}
                                    <a style="float: right" class="btn btn-send icon-send" href="#"
                                       id="order-chat-add-message">отправить</a>
                                    <div style="clear: both"></div>
                                    <div style="padding-top: 10px;" id="document-send-order"></div>
                                </div>
                            </form>
                        </div>
                        <!-- Третий столбик "Стадии Заказа" -->
                        <div class="col-lg-3 wrstepschat" id="order-stages-tab" data-score="">
                            <div class="remove-margin">
                                <div class="header-wrapper">
                                <span class="header">
                                    Порядок работы
                                </span>
                                    <div class="triangle-header"></div>
                                </div>
                            </div>
                            {# 1.Согласование условий #}
                            <div class="stepssBlock box-sizing disTab" id="conditions-approve"
                                 style="border-bottom: none; border-top: 1px solid black">
                                <p class="titleStepss">
                                    <span class="select js-select"> 1.</span> Согласование условий</p>
                                <p class="textStepss js-help-text">
                                    Обсуджение задания и условий выполнения работы. Подтверждение заказа исполнителем.
                                </p>
                                <div class="border">
                                    <div class="bird"></div>
                                </div>
                            </div>

                            <div class="stepssBlock" style="border-top: none">
                                <div class="textStepss mod-align-center-soft" style="font-size: 14px">
                                    Количество этапов в данном проекте
                                    <input style="text-align: center" type="text" id="countStage" value="" size="3"/>
                                </div>
                                <div id="order-stages">

                                </div>
                                <div class='btn_wrapper'>
                                    <div style="margin-left: -27px; margin-right: -27px; text-align: center">
                                        <a href="#"
                                           class="chat-button icon-hand"
                                           style="margin-top: 4px;"
                                           id="btnApprove">отправить на согласование
                                        </a>
                                        <a href="#"
                                           class="chat-button icon-change"
                                           style="padding-left: 60px;"
                                           id="btnChange">Внести изменения
                                        </a>
                                        <a href="#"
                                           class="chat-button icon-books"
                                           style="padding: 25px 10px;"
                                           id="btnToArchive">Отказаться и отправить в архив
                                        </a>
                                    </div>
                                </div>
                            </div>


                            <div class="stepssBlock box-sizing disTab" id="reserveSpace" style="display:none;">
                                <div class="titleStepss"><span class="select js-select">2.</span> Резервирование</div>
                                <div class="textStepss js-help-text">
                                    Заказчик резервирует сумму на оплату работы.
                                    Деньги перечисляются и хранятся на сайте.
                                </div>
                                <div class="border">
                                    <div class="bird"></div>
                                </div>
                                <ul class="stages-paid">
                                    {#                                <li class="reserved"><span class="text">Сумма за этап 1.<br/> Зарезервирована</span></li>#}
                                    {#                                <li class="unreserved"><span class="text">Сумма за этап 2.<br/> Не зарезервирована</span></li>#}
                                </ul>


                                <div class='btn_wrapper'>
                                    <div style="margin-left: -27px; margin-right: -27px; text-align: center">
                                        <a href="#"
                                           class="chat-button icon-credit_card"
                                           style="padding-left: 60px;"
                                           id="btnReserve">Зарезервировать
                                        </a>
                                        <a href="#"
                                           class="chat-button icon-arbitration js-btnArbitration"
                                           style="padding-left: 40px;">Обратиться в арбитраж
                                        </a>
                                    </div>
                                </div>

                            </div>

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

                            <div class="stepssBlock box-sizing disTab" id="completeWork" style="display: none">
                                <p class="titleStepss"><span class="select js-select">3.</span> Выполнение работы</p>
                                <p class="textStepss js-help-text">
                                    Процесс выполнения задания в заказе до получения
                                    заказчиком итогового результата работы.
                                </p>
                                <div class="border">
                                    <div class="bird"></div>
                                </div>
                                <div id="stagesWork" class="stages-work"></div>
                                <div class='btn_wrapper'>
                                    <div style="margin-left: -27px; margin-right: -27px; text-align: center">
                                        <a href="#"
                                           class="chat-button icon-arbitration js-btnArbitration"
                                           style="padding-left: 40px;">Обратиться в арбитраж
                                        </a>
                                    </div>
                                </div>
                            </div>

{#                            <div id="leaveReview" style="">#}
{#                                <div class="closeChat closeChat1">#}
{#                                    <a href="#" data-toggle="modal" data-target="#review-add"#}
{#                                       data-review-type="positive">#}
{#                                        Закрыть проект<br>и оставить отзыв#}
{#                                    </a>#}
{#                                </div>#}
{#                                <div class="closeChat closeChat2">#}
{#                                    <a href="#" data-toggle="modal" data-target="#review-add"#}
{#                                       data-review-type="negative">#}
{#                                        Закрыть проект<br>и оставить отзыв#}
{#                                    </a>#}
{#                                </div>#}
{#                            </div>#}

                            <div class="col-lg-12">
                                {% include 'partials/inc-attach-documents.html' with class='documentOrderSpace' %}
                            </div>

                            <div class="textAreaBlock2 box-sizing disTab">
                                <ol class="order-notes-block"></ol>
                                <form id="add-form-order-note">
                                    <div class="icon-note mod-align-center">Для заметок</div>
                                    <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 style="float: right" class="btn btn-send icon-send" 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>
                </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 src='{% static "js/build/chat_customer_oop.js" %}'></script>
    {#    <script type="text/javascript" src='{% static "js/chat.js" %}'></script>#}
    <script src='{% static "js/jquery.mask.min.js" %}'></script>
    {#    <script type="text/javascript" src='{% static "js/chat_customer.js" %}'></script>#}
{% endblock %}