<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" >
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

    <link rel="stylesheet" />
    <title>Document</title>
    <style>
       .Messages{

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid whitesmoke;
  position:fixed;
}

.sidebarOption {
  display: flex;
  align-items: center;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  cursor: pointer;
  color: #818181;
   margin-top:100px;
}

.sidebarOption .material-icons {
  padding: 5px;
}

.sidebarOption h3 {
  flex: 1;
  margin-left: 10px;
  font-size: 16px;
  font-weight: 400;
  color:#000000;
}
.sidebarOption:hover,
.sidebarOption:hover h3{
width:100px;
}
<!--.sidebarOption:hover,-->
<!--.sidebarOption:hover h3,-->
.sidebarOption:hover .material-icons,
<!--.sidebarOption__active,-->
.sidebarOption__active h3,
.sidebarOption__active .material-icons {
  background-color: #fcecec;
  color: #c04b37;

}



.material-icons {
  color: gray;
  border-radius:50%;
}

.header__middle input {
  border: none;
  width: 10%;
  padding: 10px;
  outline: none;
  font-size: medium;
  border-radius:50%;
  background-color: transparent;
}
.compose {
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
  text-transform: capitalize;
  color: gray;
  padding: 8px;
  border-radius: 30px;
  background-color: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: none;
  transition: background-color 0.3s, color 0.3s;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75);
}

.compose span {
  margin-right: 5px;
}
.compose.active {
    background-color: #43A6C6;
    color: black; /* Highlighted text color */
}

.compose:hover {
    opacity: 0.9; /* Optional hover effect */
}
.emailRow__options {
  display: flex;
  align-items: center;
}
.emailRow__options .material-icons,
input {
  margin: 5px;
}
.emailRow {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid whitesmoke;
  cursor: pointer;
  z-index: 999;
}
.emailRow:hover {
  border-top: 1px solid whitesmoke;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.24);
}
.emailRow__message {
  display: flex;
  flex: 0.8;
  align-items: center;
  font-size: 13px;
}
.emailRow__message h4 {
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 5px;
  padding-right: 5px;
}
.emailRow__title {
  font-size: 13px;
  flex: 0.3;
}
.emailRow__time {
  padding-right: 15px;
  font-size: 10px;
  font-weight: bold;
}
.emailRow__description {
  font-weight: 400;
  color: gray;
}


/* Header */
.compose-header {
    background-color: #f5f5f5;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab; /* For drag-and-drop effect */
    border-bottom: 1px solid #ddd;
    margin-top:500px;
}

.compose-header:hover {
    background-color: #eaeaea;
}

.compose-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.compose-close {
    font-size: 18px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
}

.compose-close:hover {
    color: #000;
}

/* Body */
.compose-body {
    padding: 12px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    gap: 12px;
}

/* Input Fields */
.compose-input {
    width: 100%;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
}

.compose-input:focus {
    border-color: #4285f4;
    outline: none;
}

<!--/* Buttons */-->
<!--.compose-button {-->
<!--    padding: 8px 16px;-->
<!--    font-size: 14px;-->
<!--    border: none;-->
<!--    width:10px;-->
<!--    border-radius: 4px;-->
<!--    cursor: pointer;-->
<!--    transition: background-color 0.3s;-->
<!--}-->

<!--.compose-button.send {-->
<!--    background-color: #4285f4;-->

<!--}-->

<!--.compose-button.send:hover {-->
<!--    background-color: #357ae8;-->
<!--}-->

<!--.compose-button.discard {-->
<!--    background-color: #f5f5f5;-->
<!--    color: #333;-->
<!--}-->

.compose-button.discard:hover {
    background-color: red;
}

/* Style for the whole button */
.sidebar__compose {
  text-transform: capitalize;
  color: gray;
  padding: 15px;
  border-radius: 20px;
  background-color: white;
  display: flex;               /* Flexbox ensures horizontal alignment */
  align-items: center;         /* Vertically aligns items */
  cursor: pointer;
  outline: none;
  border: none;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75);
}

/* Style for the 'add' icon */
.sidebar__compose .material-icons {
  margin-right: 8px;           /* Add space between the icon and text */
  vertical-align: middle;      /* Ensures the icon is vertically aligned with text */
  font-size: 20px;             /* You can adjust the size of the icon here */
}

/* Style for the hover effect */
.sidebar__compose:hover {
  background-color: #87CEFA;
  transition-duration: 0.4s;
}

 .sidebarOption:hover {
            background-color: #6699CC;
            color:black;
        }

        .sidebarOption__active {
            background-color: #6699CC;
            color: black;
            border-radius: 5px;
            width:100px;
        }
 .material-icons-black span {
    color: black;
  }
  .search {
    margin-left: 200px;
    margin-top: -30px;
    background-color: #F1F4F8;
    border-radius: 50px;
    width: 400px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.search input {
    background-color: transparent;
    outline: none;
    border: none;
    text-indent: 15px;
    width: 85%;
}
.search button {
    outline: none;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header__right span{
padding:20px;
cursor:pointer;
}

.email-checkbox + label {
    margin-right: 15px;
  }
#emailCheckbox {
    display: none; /* Hidden by default */
    position: absolute; /* Position it relative to its container */
    top: 100%; /* Position it just below the input field */
    left: 0; /* Align it with the left of the input field */
    z-index: 10; /* Ensure it appears above other elements */
    background-color: white; /* Background color for better visibility */
    border: 1px solid #ccc; /* Add a border for separation */
    padding: 10px; /* Add some spacing inside the dropdown */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    width: auto; /* Adjust width as needed */
    height:auto;
}

#dropdownIcon {
    position: relative; /* Position it relative to its container */
    cursor: pointer;
}

.email-input-container {
    position: relative; /* The dropdown will be positioned relative to this container */
}

 #BackToInboxButton {
  margin-bottom: 10px;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 5px;
}

/* Icon style with the hover background color */
#BackToInboxButton i {
  font-size: 20px;
}

/* Initially hide the text and make it transparent */
#BackToInboxButton span {
  opacity: 0;
  margin-left: 8px;
  font-size: 16px;
  background-color: black;
  color: white;
  padding: 2px;
  transition: opacity 0.3s ease; /* Smooth opacity transition */
}

/* On hover, show the text and add background color to the arrow */
#BackToInboxButton:hover i {
  background-color: #d3d3d3; /* Gray background color on hover */
  border-radius: 5%; /* Round the corners of the background */
}

#BackToInboxButton:hover span {
  opacity: 1; /* Make text fully visible on hover */
}
 html, body {
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    .Messages {
      height: 100%;
      overflow: hidden; /* This ensures the whole page doesn't scroll */
    }


    .main__body {
      margin-left: 300px;
      margin-top: 120px;
      position: sticky;
      top: 0;
      z-index: 10;
      background-color: white;
      max-height: calc(100vh - 160px);
      padding-right: 20px; /* Optional: to ensure right-side content doesn't hide under scrollbar */
    }
     body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            overflow-y: auto;
            height: 100vh;
        }

        .sticky-container {
            position: sticky;
            top: 0;
            background-color: white;
            z-index: 100;
            padding: 20px;

        }
}
    </style>
</head>
<body>

<div class="Messages ">
   <form id="messageForm " style="" >
     {% csrf_token %}

       <input type="hidden" id="user_id" name="user_id" value="{{ user_id }}">
       <input type="hidden" id="current_user_id" name="current_user_id" value="{{ current_user_id }}">
    <div class="" style="margin-top:0px; width:70.5%; margin-left:300px; ">


    </div>

    <div class="main__body" style="margin-left: 300px; margin-top: -10px; ">

    <div class="" style="margin-top: 10px;">
    <div class="sticky-container" style="position: sticky; top: 0px">
    <!-- Compose Button -->

                <h2 style="margin-left:30px; margin-top:10px; ">Messages</h2>
            <div class="search">
                <input type="text" placeholder="Search">
                <button><i class="ri-search-2-line"></i></button>
            </div>
        <div class="header__right" style="margin-left:650px; margin-top:-50px">
            <span class="material-icons">apps</span>
            <span class="material-icons">notifications</span>
            <span class="material-icons">account_circle</span>
        </div>
    <button class="sidebar__compose" id="compose" onclick="showCompose(event)" style="display: block; margin-bottom: 20px;">
      <span class="material-icons">add</span> Compose
    </button>

    <!-- Sidebar Options -->
    <div class="sidebarOption-container" style="position: sticky; top: 20px; margin-top: -140px; margin-left: 150px;">
        <div class="sidebarOption sidebarOption__active" style="width: 100px;" id="inboxButton" onclick="setActiveBox(this); renderInbox(); HideMessageDetails()">
            <span class="material-icons" style="color:black;">inbox</span>
            <h3>Inbox</h3>
        </div>

         <div class="sidebarOption" id="sentButton" style="margin-top: -32px; margin-left: 130px;" onclick="setActiveBox(this); renderSentMessages(); HideMessageDetails()">
            <span class="material-icons" style="color:black;">near_me</span>
            <h3>Sent</h3>
        </div>

<!--         <div class="sidebarOption" style="margin-top: -37px; margin-left: 250px; margin-bottom: 20px;" onclick="setActiveBox(this)">-->
<!--            <span class="material-icons" style="color:black;">delete</span>-->
<!--            <h3>Trash</h3>-->
<!--        </div>-->
    </div>
</div>


          <div id="InboxContainer" style="display:block;margin-left: 0px; top:100px; "></div>

       <div id="MessageDetailsContainer" style="display: none; height:auto; padding: 20px; border: 1px solid #ddd; margin-left: 0px; margin-top:10px; border:none; width:100%; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius:20px;">
 <button id="BackToInboxButton" onclick="backToInbox(event)">
    <i class="fa fa-arrow-left"></i> <!-- Back arrow icon -->
    <span id="BackToInboxText">Back to Inbox</span> <!-- Text to show on hover -->
  </button>

          <div id="MessageDetails" style="height: auto;"></div>
           <div id="ConversationThread" style="height:auto;"></div>
       </div>
</div>

   </div>
   </div>
 </form>
   <div class="compose-container" id="ComposeContainer"
     style="display: none; position: fixed; top:230px; bottom: 10%;  right: 5%; width: 30%; height:58%; background-color: #fff; border-radius: 30px; box-shadow: 3px 3px 3px 3px rgba(0.5, 0.5, 0.5, 0.5); padding: 30px; z-index: 1000; margin-top: 50px;">

  <div class="container" style="padding: 20px;width:100%">
    <form id="ComposeMessage" method="post" action="{% url 'send_message' %}?user_id={{ user_id }}">
      {% csrf_token %}

      <div class="fixed" style="margin-buttom:10px; width:100%">
      <div class="compose-header" style="display: flex; margin-left:-50px; space-between; align-items: center; background-color:#F0F8FF; width:128%; margin-top:-50px;">

        <span style="font-size: 18px; font-weight: bold; margin-left:20px;" >New Message</span>
        <div class="compose-close" id="Closebutton" onclick="CloseCompose(event)" style="font-size: 30px; margin-left:290px; color: red; cursor: pointer;">&times;</div>
      </div>


     <div class="compose-body">
    <div style="position: relative;">
        <div id="emailBarsContainer" style="margin-top: 10px; display: flex; flex-wrap: wrap;"></div>

        <!-- Searchable Input Field -->
        <input type="text" id="toField" placeholder="Search Emails..." style="width: 128%; text-indent: 10px; border: none; border-bottom: 1px solid #d3d3d3; height: 40px; margin-left: -50px; padding-right: 30px; cursor: pointer;">

        <!-- Dropdown Icon -->
        <span id="dropdownIcon" class="dropdown-icon" style="position: absolute; top: 50%; left: 370px; transform: translateY(-50%); cursor: pointer;">&#9660;</span>
    </div>

    <!-- Searchable Email List -->
    <div id="emailCheckbox" style="display: none; position: absolute; width: 80%; z-index: 100; background: #ffffff; border: 1px solid #d3d3d3; border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 10px; overflow-y: auto; max-height: 150px; margin-top: 5px;">

        <!-- Loop through emails -->
        {% for team in teams %}
        <label class="email-item" style="display: block; margin-bottom: 10px;">
            <input type="checkbox" value="{{ team }}" class="email-checkbox"> {{ team }}
        </label>
        {% endfor %}
    </div>
</div>


      </div>
          <input type="text" id="subject" style="width: 128%; height:40px; margin-top: 0px; border: none;  border-bottom: 1px solid #d3d3d3;margin-left:-50px;text-indent: 10px;" class="compose-input" placeholder="Subject">

          <textarea id="Message" style="width: 128%; height: 220px; margin-top: 1px; text-indent: 10px; border: none;padding-top: 10px; border-bottom: 1px solid #d3d3d3;margin-left:-50px;border-bottom:1px solid solid black"
                  class="compose-input" placeholder="Message"></textarea>


      <!-- Footer -->
      <div class="" style="display: flex; justify-content: space-between; align-items: center; margin-top:20px; margin-right:100px;">
        <button type="button" class="compose-button send" id="sendButton"
               style="margin-left:-20px; border-radius: 10px; border: none; position:fixed; color:white; background:#1F51FF;font-size:17px; width:60px; height:30px; font-weight:bold; letter-spacing:1px;" onclick="sendMessage(event)">Send</button>

        <button class="compose-button discard" id="Discardbutton"  style="margin-left:50px; border-radius: 10px; border: none; position:fixed; color:white; background:#1F51FF;font-size:17px; width:80px; height:30px; font-weight:bold; letter-spacing:1px;" onclick="CloseCompose(event)">Discard</button>

<!--        <i class="fa-solid fa-paperclip"  onclick="document.getElementById('attachment').click();" style="color:	#1F51FF; margin-right:90px; font-size:23px; cursor: pointer;"></i>-->
        <input type="file" id="attachment" name="attachment" style="margin-left:150px;" accept=".pdf,.doc,.docx,.txt">
      </div>
          </div>

    </form>

   </div>
    </div>

    <form id="ComposeReply" method="post" action="{% url 'send_reply' %}?user_id={{ user_id }}">
        <div id="ComposeBox" style="display: none;padding: 20px; margin-top: 20px; border: 1px solid #ccc;">
            <h3>Reply to: ${message.sender_id || message.recipient_id}</h3>
            <input type="text" id="toField" name="toField" value="${message.sender_id || message.recipient_id}" readonly style="width: 100%; margin-bottom: 10px;" />
            <textarea id="subject" name="subject" rows="2" placeholder="Subject" style="width: 100%; margin-bottom: 10px;"></textarea>
            <textarea id="message" name="message" rows="4" placeholder="Message" style="width: 100%; margin-bottom: 10px;"></textarea>
            <input type="file" id="attachment" name="attachment" accept=".pdf,.doc,.docx"><br>
            <button type="button" onclick="sendReply(event, '${message.message_id}')">Send</button>
        </div>
    </form>

</body>
</html>

