{% extends 'partials/base.html' %}
{% load staticfiles %}
{% 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">
			<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 customer_contacts %}

						<div class="message messd user-block" data-id="{{ contact.recipent_id}}">
							<div class="imgMess">
								<img src="{% static 'img/mess.png' %}" alt="mess-image">
							</div>
							<p class="nameMess">
								<a href="#">Тестовый контакт</a>
							</p>
							<a href="javascript:void(0)" class="conMess">Контакты</a>
							<span>0</span>
							<a href="javascript:void(0)" class="deleteMess">
								Удалить контакт
							</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="text" value="{{ request.user.pk }}" name="senderId" id="senderId" />
                    <input type="text" 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="messageBlock box-sizing disTab">
						<p>Контакты</p>
						<div class="message">
							<div class="imgMess">
								<img src="img/mess.png" alt="mess-image">
							</div>
							<p class="nameMess">
								<a href="#">Иванов Петр Иванович</a>
							</p>
							<a href="javascript:void(0)" class="conMess">Контакты</a>
						</div>
					</div>
					<div class="col-lg-12 startChat">
						<div class="insetSC1">
							Начало:
							<span>Срок сдачи:</span>
						</div>
						<div class="insetSC2">
							13.0.2016
							<span>13.0.2016</span>
						</div>
					</div>
					<div class="col-lg-12 documentsChat">
						<p>Входящие документы</p>
						<ul>
							<li>
								Архитерурное 2.jpg
								<span>7мб</span>
								<div></div>
							</li>
						</ul>
						<a href="javascript:void(0)">
							Распечатать с помощью ресурса
						</a>
					</div>
					<div class="textAreaBlock2 box-sizing disTab">
						<p>Для заметок</p>
						<textarea id="chat2"></textarea>
						<a href="javascript:void()">сохранить</a>
					</div>
					<div class="closeChat closeChat1">
						<a href="javascript:void(0)">
							Закрыть проект<br>и оставить отзыв
						</a>
					</div>
					<div class="closeChat closeChat2">
						<a href="javascript:void(0)">
							Закрыть проект<br>и оставить отзыв
						</a>
					</div>
				</div>
			</div>
			<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-id="{{ order.order.id }}">
							<span class="dimovChat"></span>
							<p class="titleOB">
								{{ order }}
							</p>
							<div class="hideOBB">
								<p class="pOB">
								<span>Испонитель:</span> {{ order.order.contractor.get_full_name }}
								</p>
{#								<p class="pOB">#}
{#									<span>Чаты:</span> Иванов, Петров, Пенкин#}
{#								</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">
                    {% for msg in chat_messages %}
{#					<div class="col-lg-12 insetCommChat  {% if msg.sender.pk == request.user.pk %}youChat{% endif %}">#}
{#						<div class="topCommChat">#}
{#							<p class="nameCommChat {% if msg.sender.pk == request.user.pk %}greenNCC{% endif %}">{{ msg.sender.get_full_name }}</p>#}
{#							<span>{{ msg.created }}</span>#}
{#						</div>#}
{#						<p class="textCommChat">{{ msg }}</p>#}
{#					</div>#}
                    {% endfor %}
                </div>
                <form id="chat-order-add">
                    <input type="text" name="senderId" value="{{ request.user.pk }}"/>
                    <input type="text" name="recipentId" id="recipentId" value="" />
                    <input type="text" name="orderId" id="orderId" value="" />
					<textarea id="chat" class="box-sizing"></textarea>
					<div class="bunChat">
						<div class="setChat box-sizing">
							<p>Прикрепить файл</p>
							<span>
								Не более 10 файлов с общим объемом 500мб
							</span>
						</div>
						<a href="javascript:void(0)">отправить</a>
					</div>
                </form>
				</div>
				<div class="col-lg-3 wrTAB">
					<div class="textAreaBlock2 box-sizing disTab">
						<p>Для заметок</p>
						<textarea id="chat2" ></textarea>
						<a href="javascript:void()">сохранить</a>
					</div>
					<div class="linkChatB box-sizing disTab">
						<a href="javascript:void(0)">предложить проект</a>
					</div>
				</div>
			</div>
			</div>
		    {% include 'partials/footer.html' %}
		</div>
	</div>

{% endblock %}

{% block js_block %}

    <script type="text/javascript">

    $(function(){
        var socket = new SocketHandler();
        var form = document.getElementById('message_form');

        $('.order-block').on('click',function(){
            var orderId = $(this).attr('data-id');
            $("#chat-order-add #orderId").val(orderId);
            var inbox = document.getElementById('message-chat-order-space');
            inbox.innerHTML = '';
            socket.send_order_message(orderId);
        });

        $('.user-block').on('click', function(){
            var userId = $(this).attr('data-id');
            $("#contact-chat-form #recipentId").val(userId);
            var inbox = document.getElementById('message-chat-space');
            inbox.innerHTML = '';
            socket.send_contact_message(userId);
        });

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

            $("#chat").val("");
        });
    });

    var SocketHandler = function(){
        var url = 'ws://127.0.0.1:8888/chat';
        var sock = new WebSocket(url);
        var intervalId;
        sock.onopen = function(){
            console.log("Start connect");
            intervalId = setInterval(function(){sock.send('{"dummy": 1}');}, 150000);
        };
        sock.onmessage = function(event){
            console.log(event.data);
            var message = JSON.parse(event.data);
            var inbox;
            if (message.answer_type == 'contact'){
                inbox= document.getElementById('message-chat-order-space');
            }else if(message.answer_type == 'order'){
                inbox= document.getElementById('message-chat-space');
            }
            inbox.innerHTML += '<div class="col-lg-12 insetCommChat"><div class="topCommChat">' +
                    '<p class="nameCommChat">Иванов</p> <span>13.0.2016</span></div>' +
                    '<p class="textCommChat">' + message.msg +'</p></div>';

        };

        this.send_order_message = function(orderId){
           var data = {
               "format_type": "order_message",
               "order_id": orderId
           }
           sock.send(JSON.stringify(data));
           console.log(data);
        };

        this.send_contact_message = function(userId){
            var data = {
                "format_type": "add_message",
                "user_id": userId
            }
            sock.send(JSON.stringify(data));
            console.log(data);
        };

        this.add_contact_message = function(messageData){
            console.log(messageData);
            sock.send(JSON.stringify(messageData));
        };

        this.send_message = function(form){
            var elements = form.elements;
            var data = {};
            var i=0;
            for(var i; i< elements.length; i++){
                if (elements[i].name == 'message') {
                    data[elements[i].name] = elements[i].value;
                }
            }
            sock.send(JSON.stringify(data));
	        var textareaMessage = document.getElementById("message");
            textareaMessage.value = "";

        }

    }

</script>
{% endblock %}