{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
{%csrf_token%}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"
crossorigin="anonymous" />
<link rel="stylesheet" href="{% static 'store/build/css/countrySelect.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css" integrity="sha512-3PN6gfRNZEX4YFyz+sIyTF6pGlQiryJu9NlGhu9LrLMQ7eDjNgudQoFDK3WSNAayeIKc6B8WXXpo4a7HqxjKwg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
   
 :root {
	 --white: #fff;
	 --black: #000;
	 --bg: #f8f8f8;
	 --grey: #999;
	 --dark: #1a1a1a;
	 --light: #e6e6e6;
	 --wrapper: 1000px;
	 --blue: #bc9948;
}

 .wrapper {
	 position: relative;
	 left: 50%;
	 width: var(--wrapper);
	 height: 800px;
	 transform: translate(-50%, 0);
}
 .containerr {
	 position: relative;
	 top: 42%;
	 left: 50%;
	 height: 75%;
	 background-color: var(--white);
	 transform: translate(-50%, -50%);
}
 .containerr .left {
	 float: left;
	 width: 37.6%;
	 height: 100%;
	 border: 1px solid var(--light);
	 background-color: var(--white);
}
 .containerr .left .top {
	 position: relative;
	 width: 100%;
	 height: 96px;
	 padding: 29px;
}
 .containerr .left .top:after {
	 position: absolute;
	 bottom: 0;
	 left: 50%;
	 display: block;
	 width: 80%;
	 height: 1px;
	 content: '';
	 background-color: var(--light);
	 transform: translate(-50%, 0);
}
 .containerr .left input {
	 float: left;
	 width: 188px;
	 height: 42px;
	 padding: 0 15px;
	 border: 1px solid var(--light);
	 background-color: #f3ebd9;
	 border-radius: 21px;
	 font-family: 'Source Sans Pro', sans-serif;
	 font-weight: 400;
}
 .containerr .left input:focus {
	 outline: none;
}
 .containerr .left a.search {
	 display: block;
	 float: left;
	 width: 42px;
	 height: 42px;
	 margin-left: 10px;
	 border: 1px solid var(--light);
	 background-color: var(--blue);
	 background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/name-type.png');
	 background-repeat: no-repeat;
	 background-position: top 12px left 14px;
	 border-radius: 50%;
}
 .containerr .left .people {
	 margin-left: -1px;
	 border-right: 1px solid var(--light);
	 border-left: 1px solid var(--light);
	 width: calc(100% + 2px);
}
 .containerr .left .people .person {
	 position: relative;
	 width: 100%;
	 padding: 12px 10% 16px;
	 cursor: pointer;
	 background-color: var(--white);
}
 .containerr .left .people .person:after {
	 position: absolute;
	 bottom: 0;
	 left: 50%;
	 display: block;
	 width: 80%;
	 height: 1px;
	 content: '';
	 background-color: var(--light);
	 transform: translate(-50%, 0);
}
.attach-abs {
    position: absolute;
    left: 0;
    top: 3px;
}
.attach-file {
    position: relative;
}
.attach-abs input[type="file"] {
    height: 30px !important;
    width: 30px !important;
    position: relative;
    cursor: pointer !important;
    opacity: 0;
}
 .containerr .left .people .person img {
	 float: left;
	 width: 40px;
	 height: 40px;
	 margin-right: 12px;
	 border-radius: 50%;
	 object-fit: cover;
}
 .containerr .left .people .person .name {
	 font-size: 14px;
	 line-height: 22px;
	 color: var(--dark);
	 font-family: 'Source Sans Pro', sans-serif;
	 font-weight: 600;
}
.containerr .right .chat .bubble {
    margin: 10px 0;
	width: 50%;
}
.containerr .right .chat::-webkit-scrollbar-thumb {
    background: #ead4ab;
}
.containerr .right .chat::-webkit-scrollbar {
    width: 4px;
}
.containerr .right .chat {
    max-height: 450px;
    overflow-y: auto !important;
}
 .containerr .left .people .person .time {
	 font-size: 14px;
	 position: absolute;
	 top: 16px;
	 right: 10%;
	 padding: 0 0 5px 5px;
	 color: var(--grey);
	 background-color: var(--white);
}
 .containerr .left .people .person .preview {
	 font-size: 14px;
	 display: inline-block;
	 overflow: hidden !important;
	 width: 70%;
	 white-space: nowrap;
	 text-overflow: ellipsis;
	 color: var(--grey);
}
 .containerr .left .people .person.active, .container .left .people .person:hover {
	 margin-top: -1px;
	 margin-left: -1px;
	 padding-top: 13px;
	 border: 0;
	 background-color: var(--blue);
	 width: calc(100% + 2px);
	 padding-left: calc(10% + 1px);
}
 .containerr .left .people .person.active span, .container .left .people .person:hover span {
	 color: var(--white);
	 background: transparent;
}
 .containerr .left .people .person.active:after, .container .left .people .person:hover:after {
	 display: none;
}
 .containerr .right {
	 position: relative;
	 float: left;
	 width: 62.4%;
	 height: 100%;
}
 .containerr .right .top {
	 width: 100%;
	 height: 47px;
	 padding: 15px 29px;
	 background-color: #e2c38a;
}
 .containerr .right .top span {
	 font-size: 15px;
	 color: var(--grey);
}
 .containerr .right .top span .name {
	 color: var(--dark);
	 font-family: 'Source Sans Pro', sans-serif;
	 font-weight: 600;
}
 .containerr .right .chat {
	 position: relative;
	 overflow: hidden;
	 padding: 0 35px 92px;
	 border-width: 1px 1px 1px 0;
	 border-style: solid;
	 border-color: var(--light);
	 height: calc(100% - 48px);
	 justify-content: flex-end;
	 flex-direction: column;
}
 .containerr .right .chat.active-chat {
	 display: block;
	 display: flex;
}
 .containerr .right .chat.active-chat .bubble {
	 transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(1) {
	 animation-duration: 0.15s;
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(2) {
	 animation-duration: 0.3s;
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(3) {
	 animation-duration: 0.45s;
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(4) {
	 animation-duration: 0.6s;
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(5) {
	 animation-duration: 0.75s;
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(6) {
	 animation-duration: 0.9s;
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(7) {
	 animation-duration: 1.05s;
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(8) {
	 animation-duration: 1.2s;
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(9) {
	 animation-duration: 1.35s;
}
 .containerr .right .chat.active-chat .bubble:nth-of-type(10) {
	 animation-duration: 1.5s;
}
 .containerr .right .write {
	 position: absolute;
	 bottom: 29px;
	 left: 30px;
	 height: 42px;
	 padding-left: 8px;
	 border: 1px solid var(--light);
	 background-color: #f3ebd9;
	 width: calc(100% - 58px);
	 border-radius: 5px;
}
 .containerr .right .write input {
	 font-size: 16px;
	 float: left;
	 width: 84%;
	 height: 40px;
	 padding: 0 10px;
	 color: var(--dark);
	 border: 0;
	 outline: none;
	 background-color: #f3ebd9;
	 font-family: 'Source Sans Pro', sans-serif;
	 font-weight: 400;
}
 .containerr .right .write .write-link.attach:before {
	 display: inline-block;
	 float: left;
	 width: 20px;
	 height: 42px;
	 content: '';
	 background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/attachment.png');
	 background-repeat: no-repeat;
	 background-position: center;
}
 .containerr .right .write .write-link.smiley:before {
	 display: inline-block;
	 float: left;
	 width: 20px;
	 height: 42px;
	 content: '';
	 background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/smiley.png');
	 background-repeat: no-repeat;
	 background-position: center;
}
 .containerr .right .write .write-link.send:before {
	 display: inline-block;
	 float: left;
	 width: 20px;
	 height: 42px;
	 margin-left: 11px;
	 content: '';
	 background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/send.png');
	 background-repeat: no-repeat;
	 background-position: center;
}
 .containerr .right .bubble {
	 font-size: 16px;
	 position: relative;
	 display: inline-block;
	 clear: both;
	 margin-bottom: 8px;
	 padding: 13px 14px;
	 vertical-align: top;
	 border-radius: 5px;
}
 .containerr .right .bubble:before {
	 position: absolute;
	 top: 19px;
	 display: block;
	 width: 8px;
	 height: 6px;
	 content: '\00a0';
	 transform: rotate(29deg) skew(-35deg);
}
 .containerr .right .bubble.you {
	 float: left;
	 color: var(--white);
	 background-color: var(--blue);
	 align-self: flex-start;
	 animation-name: slideFromLeft;
}
 .containerr .right .bubble.you:before {
	 left: -3px;
	 background-color: var(--blue);
}
 .containerr .right .bubble.me {
	 float: right;
	 color: var(--dark);
	 background-color: #f3ebd9;
	 align-self: flex-end;
	 animation-name: slideFromRight;
}
 .containerr .right .bubble.me:before {
	 right: -3px;
	 background-color: #f3ebd9;
}
 .containerr .right .conversation-start {
	 position: relative;
	 width: 100%;
	 margin-bottom: 27px;
	 text-align: center;
}
 .containerr .right .conversation-start span {
	 font-size: 14px;
	 display: inline-block;
	 color: var(--grey);
}
 .containerr .right .conversation-start span:before, .container .right .conversation-start span:after {
	 position: absolute;
	 top: 10px;
	 display: inline-block;
	 width: 30%;
	 height: 1px;
	 content: '';
	 background-color: var(--light);
}
 .containerr .right .conversation-start span:before {
	 left: 0;
}
.no-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    font-size: 30px;
    color: #bc9948;
    border: 1px solid #bc9948;
    margin-top: 20px;
    padding: 30px;
    border-radius: 20px;
}
 .containerr .right .conversation-start span:after {
	 right: 0;
}
.time{
	display: block;
    font-size: 9px;
    text-align: right;
}
p.select-chat {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
.containerr .right .chat .bubble p {
    margin: 0 !important;
}
img.chat-msg {
    width: 110px;
    max-height: 200px;
    object-fit: cover;
}
.write {
    display: none;
}

.containerr .left .people {
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

 @keyframes slideFromLeft {
	 0% {
		 margin-left: -200px;
		 opacity: 0;
	}
	 100% {
		 margin-left: 0;
		 opacity: 1;
	}
}
 @-webkit-keyframes slideFromLeft {
	 0% {
		 margin-left: -200px;
		 opacity: 0;
	}
	 100% {
		 margin-left: 0;
		 opacity: 1;
	}
}
 @keyframes slideFromRight {
	 0% {
		 margin-right: -200px;
		 opacity: 0;
	}
	 100% {
		 margin-right: 0;
		 opacity: 1;
	}
}
 @-webkit-keyframes slideFromRight {
	 0% {
		 margin-right: -200px;
		 opacity: 0;
	}
	 100% {
		 margin-right: 0;
		 opacity: 1;
	}
}
 
</style>
<title>Beni | Messages</title>
<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles profile mx-0">
        <div class="col">
            <h2 class="fs-32 mb-0">Messages</h2>
        </div>
    </div>
	{% if rooms %}
    <div class="top-form-user mt-4">
        <div class="wrapper">
            <div class="containerr">
                <div class="left">
                    <!-- <div class="top">
                        <input type="text" placeholder="Search" />
                        <a href="javascript:;" class="search"></a>
                    </div> -->
                    <ul class="people">
						{% for room in rooms %}
                        <li class="person" data-chat="person1" id="buyer_id" onclick="fetch('{{room.user.id}}')">
                            <img src="{% if room.user.avatar %}{{ room.user.avatar}}{% else %}{% static '/admin/images/place_holder.png' %} {% endif %}" alt="" />
                            {% for buyer in buyer_info %}
							{% if buyer.user_id == room.user.id %}
							<span class="name">{{buyer.first_name}} {{buyer.last_name}}</span>
							{% endif %}
							{% endfor %}
							{% if room.last_message_time.date == today_date %}
							<span class="time">{{ room.last_message_time|time:'h:i A' }}</span>
							{% else %}
							<span class="time">{{ room.last_message_time|date:'M d, Y' }}</span>
							{% endif %}
                            <span class="preview">{% if room.last_message_text %}{{room.last_message_text}}{% else %}[File]{% endif %}</span>
							
                        </li>
						{% endfor %}
                        
                    </ul>
                </div>
				{%if rooms%}
                <div class="right">
                    <div class="top"><span>To: <span class="name" id="user_name"></span></span></div>
                    <div class="chat" id="chat_box" data-chat="person1">
						<p class="select-chat">Select Any chat</p>
                        <!-- <div class="conversation-start">
                            <span>Today, 6:48 AM</span>
                        </div>
                        <div class="bubble me">
                            Hello,
                        </div>
                        <div class="bubble you">
                            it's me.
                        </div>
                        <div class="bubble you">
                            I was wondering...
                        </div> -->
                    </div>
                    <div class="write">
						<!-- <div class="attach-file">
							<a href="javascript:;" class="write-link attach"></a>
							<div class="attach-abs">
								<input type="file" name="file">
							</div>	
						</div> -->
                        
                        <input type="text" id="send_message" />
                        <!-- <a href="javascript:;" class="write-link smiley"></a> -->
                        <a href="javascript:;" id="send-btn" class="write-link send"></a>
                    </div>
                </div>
				{%endif%}
            </div>
        </div>
    </div>
	{% else %}
	<div class="no-message">
		<p>No Message</p>
	</div>
	{%endif%}

</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    "use strict";

// document.querySelector('.chat[data-chat=person1]').classList.add('active-chat');
document.querySelector('.person[data-chat=person1]').classList.add('active');
let friends = {
    list: document.querySelector('ul.people'),
    all: document.querySelectorAll('.left .person'),
    name: ''
  },
  chat = {
    container: document.querySelector('.container .right'),
    current: null,
    person: null,
    name: document.querySelector('.container .right .top .name')
  };
friends.all.forEach(f => {
  f.addEventListener('mousedown', () => {
    f.classList.contains('active') || setAciveChat(f);
  });
});
function setAciveChat(f) {
  friends.list.querySelector('.active').classList.remove('active');
  f.classList.add('active');
  chat.current = chat.container.querySelector('.active-chat');
  chat.person = f.getAttribute('data-chat');
  chat.current.classList.remove('active-chat');
  chat.container.querySelector('[data-chat="' + chat.person + '"]').classList.add('active-chat');
  friends.name = f.querySelector('.name').innerText;
  chat.name.innerHTML = friends.name;
}

function getMessageTimestamp(timestamp) {
  const messageDate = new Date(timestamp);
  const currentDate = new Date();
  
  if (messageDate.toDateString() === currentDate.toDateString()) {
    // if message was sent today, show the time
    return messageDate.toLocaleTimeString('en-US', {hour12: true, hour: 'numeric', minute: 'numeric'});
  } else {
    // if message was sent on a previous day, show the date
    return messageDate.toLocaleDateString('en-US', {year: 'numeric', month: 'short', day: 'numeric'});
  }
}


var buyer = ''

function getChat(user_id){
	$(".write").css("display", "block")
    $(this).addClass("active");
	$.ajax({
      url: "/get-messages-list?user_id=" + user_id + '&store_id='+ "{{store_info.user_id}}",
      type: "GET",
      data: {
        user_id: user_id,
      },
      success: function ({ data }) {
		console.log(data)
        const selectEl = document.getElementById("chat_box");
        selectEl.innerHTML = null;
        for (let item of data) {
		$('#user_name').text(item.sender_name)
          const div = document.createElement("div");
		  const span = document.createElement("p");
		  span.className = 'time';
		  const formattedTimestamp = getMessageTimestamp(item.date);
		  span.innerText = formattedTimestamp
		  div.className = 'bubble';
		  if(item.sender){
			div.classList.add('me');
		  }else{
			div.classList.add('you');
		  }
		  if(item.type=='text'){
			div.innerText = item.message;
		  }else{
			const img = document.createElement("img");
			img.setAttribute('src', item.message);
			img.className = "chat-msg";
		  	div.append(img);
		  }
		  div.append(span);
          selectEl.append(div);
        }
      },
    });
}
var timeout = null;
function fetch(user_id) {
	buyer = user_id
	getChat(user_id);
	clearInterval(timeout);
	timeout = setInterval(()=>{
		getChat(user_id);
		
	},2000); 
  }

 var inputField = document.getElementById("send_message");
  inputField.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
      event.preventDefault(); // Prevent the default Enter key behavior (e.g., line break in text area)
      document.getElementById("send-btn").click(); // Simulate a click on the "send-btn" button
    }
  });


// send message function
$("#send-btn").on( "click", function() {
	console.log('hello work')
	var message = $('#send_message').val()
	$('#send_message').val("");
	var store_user = '{{store_info.user_id}}'
	var buyer_user = buyer

	var a = $('input[name="csrfmiddlewaretoken"]').val()
    const formData1 = new FormData();
    formData1.append('message',message)
    formData1.append('store_id',store_user)
	formData1.append('user_id',buyer_user)
    formData1.append('csrfmiddlewaretoken',a)
	console.log('hello work2')
	$.ajax({
                url: '/send-message',
                type: 'POST',
                dataType: 'json',
                data: formData1,
				processData: false,
				contentType: false,
                success: function(response) {
                    // handle success response here
                },
                error: function(xhr, status, error) {
                    // handle error response here
                }
            });
})

</script>

{% endblock %}